/* Cirdz design tokens — UI Concept v1.0 (locked) */
:root {
  /* Color — System 2 Stone & Current */
  --color-canvas: #f2f0ec;
  --color-surface: #fafaf8;
  --color-text: #2a2825;
  --color-text-muted: #8a8780;
  --color-border: #d8d5ce;
  --color-signal: #c17a3a;
  --color-signal-dim: rgba(193, 122, 58, 0.1);
  --color-deep: #2a2825;
  --color-on-deep: #fafaf8;
  --color-interactive: #2f5a8c;
  --color-interactive-hover: #244a73;
  --color-focus: #2f5a8c;
  --color-error: #a33b35;
  --color-success: #3f6b4a;
  --color-on-primary: #fafaf8;
  --color-cta-hover: #3a3835;

  /* Typography — Pair 1 fallbacks */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Scale — desktop locked (UI Concept §2.3) */
  --type-display-xl: 72px;
  --type-display-lg: 44px;
  --type-heading-md: 30px;
  --type-heading-sm: 20px;
  --type-body-lg: 18px;
  --type-body-md: 16px;
  --type-body-sm: 14px;
  --type-label: 12px;
  --type-metric: 48px;

  /* Spacing — 4/8 base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* Layout — 12-col / 1120 content */
  --content-max: 1120px;
  --gutter: 24px;
  --margin-inline: 80px;
  --header-h: 72px;
  --col: calc((100% - (11 * var(--gutter))) / 12);

  /* Width roles (approx within 1120) */
  --width-wide: 920px;      /* 10 col */
  --width-standard: 730px;  /* 8 col */
  --width-narrow: 540px;    /* 6 col */
  --width-minimal: 350px;   /* 4 col */

  /* Radius / shadow */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(42, 40, 37, 0.06);

  /* Motion — Signal Flow */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-mid: 200ms;
  --dur-slow: 450ms;
  --dur-process: 360ms;
}

@media (max-width: 1024px) {
  :root {
    --margin-inline: 48px;
    --type-display-xl: clamp(48px, 6vw, 64px);
    --type-display-lg: clamp(34px, 4vw, 40px);
  }
}

@media (max-width: 768px) {
  :root {
    --margin-inline: 32px;
    --gutter: 16px;
    --type-display-xl: 42px;
    --type-display-lg: 32px;
    --type-heading-md: 26px;
    --type-metric: 40px;
  }
}

@media (max-width: 480px) {
  :root {
    --margin-inline: 16px;
    --type-display-xl: 40px;
  }
}