@layer reset, base, components, modules, utilities;

:root {
  --color-canvas: #f8f8f6;
  --color-canvas-raised: #ffffff;
  --color-canvas-alt: #f1f1ee;
  --color-canvas-inset: #f4f4f2;

  --color-ink: #1a1d26;
  --color-ink-dark: #3d4252;
  --color-ink-medium: #6b7084;
  --color-ink-light: #9da2b3;
  --color-ink-lightest: #e2e4ea;
  --color-ink-inverted: #ffffff;

  --color-primary: #e8590c;
  --color-primary-hover: #c2410c;
  --color-primary-light: #fff7ed;

  --color-trigger: #fff7ed;
  --color-trigger-border: #fdba74;
  --color-trigger-icon: #ea580c;

  --color-step: #eef2ff;
  --color-step-border: #a5b4fc;
  --color-step-icon: #4f46e5;

  --color-action: #f0fdf4;
  --color-action-border: #86efac;
  --color-action-icon: #16a34a;

  --color-logic: #fdf4ff;
  --color-logic-border: #d8b4fe;
  --color-logic-icon: #9333ea;

  --color-link: #c2410c;
  --color-link-hover: #9a3412;
  --color-selected: #fff7ed;
  --color-focus: #e8590c;

  --color-positive: #16a34a;
  --color-negative: #dc2626;
  --color-warning: #d97706;

  --color-border: #e2e4ea;
  --color-border-strong: #c9cdd8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-elevated:
    0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-panel: -16px 0 40px rgba(15, 23, 42, 0.10);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-card: 1.25rem;
  --space-card-lg: 1.5rem;

  --inline-space: 1ch;
  --block-space: 1rem;

  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs: 0.6875rem;
  --text-label-mono: 0.6875rem;
  --text-caption: 0.75rem;
  --text-small: 0.8125rem;
  --text-label: 0.8125rem;
  --text-body: 0.875rem;
  --text-normal: 0.875rem;
  --text-card-heading: 0.9375rem;
  --text-section: 1rem;
  --text-large: 1.125rem;
  --text-xl: 1.25rem;
  --text-page-title: 1.25rem;
  --text-2xl: 1.5rem;
  --text-category: 0.6875rem;
  --letter-spacing-label: 0.06em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --radius-small: 8px;
  --radius: 12px;
  --radius-large: 16px;

  --z-popup: 10;
  --z-nav: 30;
  --z-tooltip: 50;
  --z-drawer: 40;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --main-max-width: 72rem;
  --main-padding: clamp(var(--space-4), 3vw, var(--space-8));
  --sidebar-width: 260px;
  --panel-width: 500px;
  --topbar-height: 3.5rem;
  --bottom-drawer-height: 16rem;
  --bg-grid:
    linear-gradient(rgba(61, 66, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 66, 82, 0.045) 1px, transparent 1px);
  --bg-grid-size: 24px 24px;
}