@layer legacy, tokens, base, shell, components, pages;

@layer tokens {
  :root {
    color-scheme: light;

    --canvas: #f5f6f3;
    --canvas-deep: #eef1ed;
    --surface: rgba(255, 255, 255, .58);
    --surface-strong: rgba(255, 255, 255, .90);
    --surface-solid: #fff;
    --surface-subtle: rgba(27, 35, 31, .045);
    --surface-hover: rgba(27, 35, 31, .07);
    --surface-active: rgba(116, 80, 31, .10);

    --text-primary: #1d2521;
    --text-secondary: #4f5b55;
    --text-muted: #626d67;
    --text-on-accent: #fff;
    --accent-fg: #74501f;
    --accent-hover: #5e4018;
    --accent-bg: rgba(149, 105, 43, .11);

    --danger-fg: #9b2f2a;
    --danger-bg: rgba(166, 48, 42, .10);
    --warning-fg: #7c571a;
    --warning-bg: rgba(160, 112, 34, .12);
    --success-fg: #276a4a;
    --success-bg: rgba(39, 120, 80, .11);
    --info-fg: #3f6387;
    --info-bg: rgba(63, 99, 135, .10);

    --divider: rgba(30, 39, 35, .09);
    --divider-strong: rgba(30, 39, 35, .16);
    --focus-ring: rgba(91, 111, 99, .28);
    --elevation-overlay: 0 24px 70px rgba(24, 30, 27, .16), 0 3px 14px rgba(24, 30, 27, .08);
    --elevation-drag: 0 30px 90px rgba(24, 30, 27, .22), 0 6px 22px rgba(24, 30, 27, .12);

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-overlay: 22px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --font-caption: 12px;
    --font-body: 14px;
    --font-lead: 16px;
    --font-title: clamp(32px, 4vw, 48px);
    --control-height: 40px;
    --touch-target: 44px;
    --sidebar: 248px;
    --topbar: 68px;
    --viewport-block: 100vh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Compatibility aliases while legacy pages migrate to semantic tokens. */
    --pearl: var(--canvas);
    --pearl-bright: var(--surface-solid);
    --paper: var(--surface);
    --paper-strong: var(--surface-strong);
    --paper-soft: var(--surface-subtle);
    --mist: var(--canvas-deep);
    --ink: var(--text-primary);
    --ink-2: var(--text-primary);
    --ink-soft: var(--text-secondary);
    --muted: var(--text-muted);
    --text: var(--text-primary);
    --text-soft: var(--text-secondary);
    --gold: var(--accent-fg);
    --gold-bright: #9a7035;
    --gold-soft: var(--accent-bg);
    --red: var(--danger-fg);
    --red-bright: #b13a33;
    --red-soft: var(--danger-bg);
    --jade: var(--success-fg);
    --jade-soft: var(--success-bg);
    --teal: var(--success-fg);
    --blue: var(--info-fg);
    --blue-soft: var(--info-bg);
    --violet: #66578a;
    --violet-soft: rgba(102, 87, 138, .10);
    --danger: var(--danger-fg);
    --warning: var(--warning-fg);
    --success: var(--success-fg);
    --info: var(--info-fg);
    --line: var(--divider);
    --line-strong: var(--divider-strong);
    --border: var(--divider);
    --shadow: none;
    --shadow-paper: none;
    --shadow-float: var(--elevation-overlay);
    --radius: var(--radius-lg);
  }

  @supports (height: 100dvh) {
    :root { --viewport-block: 100dvh; }
  }
}