/* Axiom design tokens v2 (2026-09-24) — single source for the workspace, the marketing site and generated documents.
   Spec: docs/DESIGN_SYSTEM.md. Contrast verified (WCAG 2.2 AA). Change values here, never in components. */

@font-face { font-family: "Inter"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  /* surfaces */
  --bg: #FFFFFF;               /* main canvas */
  --surface: #FFFFFF;          /* content surfaces sit on the canvas without a box */
  --surface-2: #F7F7F8;        /* sidebar, secondary surfaces, table headers */
  --surface-sunken: #F4F4F5;   /* wells: passages, code, inputs on the sidebar */
  --surface-hover: #F4F4F5;
  --surface-raised: #FFFFFF;   /* menus, dialogs, composer (with shadow) */
  /* text */
  --text: #18181B;             /* 17.7:1 */
  --text-2: #71717A;           /* 4.8:1 on canvas, 4.5:1 on sidebar */
  --text-3: #A1A1AA;           /* placeholders and disabled only (not for information) */
  --text-inverse: #FFFFFF;
  /* lines */
  --border: #E8E8EC;           /* dividers (decorative) */
  --border-strong: #8E8E96;    /* text-input outlines only: 3.3:1 on canvas, 3.0:1 on sidebar */
  /* actions: charcoal for primary buttons, teal for selection and brand accents */
  --primary: #18181B;
  --primary-hover: #27272A;
  --primary-text: #FFFFFF;
  --accent: #176B68;           /* selected state, links, focus, brand */
  --accent-hover: #125654;
  --accent-soft: #EDF6F4;      /* selected backgrounds; teal on it 5.7:1 */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  /* semantic (status only) */
  --warning: #B7791F;          /* icons, bars, edges */
  --warning-text: #8A5A12;     /* 5.9:1 */
  --warning-soft: #FBF5EA;
  --error: #C44545;
  --error-text: #B42318;       /* 6.6:1 */
  --error-soft: #FDF0EF;
  --success: #176B68;
  --success-soft: #EDF6F4;

  /* typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-small: 13px;    --lh-small: 18px;
  --fs-body: 15px;     --lh-body: 22px;
  --fs-read: 16px;     --lh-read: 26px;
  --fs-h3: 16px;       --fs-h2: 20px;       --fs-h1: 30px;       --fs-display: 38px;
  --fw-regular: 400;   --fw-medium: 500;    --fw-semibold: 600;

  /* spacing (4 px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  /* shape */
  --radius-sm: 8px;            /* controls */
  --radius-md: 12px;           /* panels */
  --radius-lg: 16px;           /* composer, dialogs */
  --control-h: 40px;
  --control-h-sm: 32px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
  --shadow-overlay: 0 12px 32px -8px rgba(24, 24, 27, .16), 0 2px 6px rgba(24, 24, 27, .06);   /* menus, dialogs */
  --shadow-composer: 0 8px 28px -10px rgba(24, 24, 27, .18), 0 1px 3px rgba(24, 24, 27, .06);
  /* motion */
  --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(.2, 0, 0, 1);
  /* layout */
  --sidebar-w: 264px; --sidebar-w-collapsed: 64px; --header-h: 56px;
  --content-max: 1200px; --content-narrow: 880px; --read-max: 720px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111113; --surface: #111113; --surface-2: #18181B; --surface-sunken: #1C1C20; --surface-hover: #1F1F23; --surface-raised: #1C1C20;
  --text: #FAFAFA; --text-2: #A1A1AA; --text-3: #71717A; --text-inverse: #111113;
  --border: #27272A; --border-strong: #6B6B73;
  --primary: #FAFAFA; --primary-hover: #E4E4E7; --primary-text: #111113;
  --accent: #4FB3AB; --accent-hover: #6CC4BD; --accent-soft: #16302E;
  --warning: #D9A441; --warning-text: #E0B25C; --warning-soft: #2A2317;
  --error: #E07A7A; --error-text: #EE9A9A; --error-soft: #2E1C1D;
  --success: #4FB3AB; --success-soft: #16302E;
  --shadow-overlay: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-composer: 0 8px 28px -10px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111113; --surface: #111113; --surface-2: #18181B; --surface-sunken: #1C1C20; --surface-hover: #1F1F23; --surface-raised: #1C1C20;
    --text: #FAFAFA; --text-2: #A1A1AA; --text-3: #71717A; --text-inverse: #111113;
    --border: #27272A; --border-strong: #6B6B73;
    --primary: #FAFAFA; --primary-hover: #E4E4E7; --primary-text: #111113;
    --accent: #4FB3AB; --accent-hover: #6CC4BD; --accent-soft: #16302E;
    --warning: #D9A441; --warning-text: #E0B25C; --warning-soft: #2A2317;
    --error: #E07A7A; --error-text: #EE9A9A; --error-soft: #2E1C1D;
    --success: #4FB3AB; --success-soft: #16302E;
    --shadow-overlay: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-composer: 0 8px 28px -10px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .4);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }