/* ============================================================
   EDITORIAL — design tokens (light + dark)
   ============================================================ */

:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #0d0f10;
  --surface: #151819;
  --surface-2: #1c2021;
  --header: rgba(13, 15, 16, 0.84);

  /* ink */
  --ink: #f1eee6;
  --ink-strong: #ffffff;
  --muted: #9b9e98;
  --muted-strong: #b6b9b2;

  /* lines */
  --line: #303536;
  --line-strong: #3d4344;

  /* accent */
  --accent: #ddb15b;
  --accent-strong: #e8c47a;
  --accent-soft: rgba(221, 177, 91, 0.13);
  --accent-glow: rgba(221, 177, 91, 0.08);

  /* semantic */
  --danger: #d88376;

  /* type — terminal editorial system */
  --font-ui: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-text: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-mono: var(--font-ui);
  --font-sans: var(--font-ui);

  --text-label: 0.66rem;
  --text-meta: 0.72rem;
  --text-body: 0.94rem;
  --text-lead: 1.08rem;

  /* rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* effects */
  --shadow-float: 0 16px 42px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.24);
  --focus-ring: 0 0 0 3px var(--accent-soft);

  /* layout */
  --sidebar-w: 236px;
  --rightrail-w: 304px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* semantic aliases — component APIs should use these names */
  --color-canvas: var(--bg);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-2);
  --color-text: var(--ink);
  --color-text-strong: var(--ink-strong);
  --color-text-muted: var(--muted);
  --color-text-subtle: var(--muted-strong);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-brand: var(--accent);
  --color-brand-strong: var(--accent-strong);
  --color-brand-soft: var(--accent-soft);
  --color-danger: var(--danger);
  --color-on-brand: var(--bg);

  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);

  --radius-xs: var(--r-xs);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-full: var(--r-full);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ec;
  --surface: #fbfaf6;
  --surface-2: #e9e6dd;
  --header: rgba(244, 242, 236, 0.86);

  --ink: #181917;
  --ink-strong: #000000;
  --muted: #686a64;
  --muted-strong: #4d4f4a;

  --line: #d5d1c6;
  --line-strong: #bdb8aa;

  --accent: #9a630e;
  --accent-strong: #7d4f0a;
  --accent-soft: rgba(154, 99, 14, 0.11);
  --accent-glow: rgba(154, 99, 14, 0.07);

  --danger: #a44a3c;

  --shadow-float: 0 14px 34px rgba(60, 50, 20, 0.14);
  --shadow-pop: 0 22px 56px rgba(60, 50, 20, 0.16);
}