/*
 * Design language tokens. Generated from tokens/core.json and tokens/themes/graphite-indigo.tokens.json
 * by scripts/build-tokens.mjs in @filipgutica/design-system: edit the JSON and run
 * `pnpm tokens:build`. Do not edit this file.
 * DESIGN.md names these tokens; it never repeats their values.
 *
 * Two layers. The identity block at the top of :root is the theme's own: its hue
 * pair and fonts. This file carries the default theme. Another theme keeps this file
 * unchanged and loads its themes/<id>.css after it, on :root; that file may also set
 * the theme's neutrals. A new project can set the identity lines on :root in its own
 * stylesheet the same way. The dark blocks switch --color-project to
 * --color-project-dark, so the override needs no dark rule. Check --color-accent-text,
 * --color-nav-current-text, and --color-segmented-current-text at 4.5:1 on the new hue
 * and override them when they fall short. A theme file sets the last two for you; its
 * hue must carry --color-accent-text itself, which the contrast tests check.
 * The terminal plate tokens also belong to the identity layer; every other line is core.
 *
 * Standalone HTML: import or inline this file.
 * Inline visuals: inherit the host font and theme variables; see DESIGN.md.
 * Repos: map these names onto the repository's own token system.
 *
 * Theme states: bare :root is light. prefers-color-scheme picks dark unless
 * data-theme="light" is set. data-theme="dark" forces dark.
 */

:root {
  color-scheme: light;

  /* Identity layer: a project swaps these four lines. --color-project is the light-theme hue;
     --color-project-dark is the dark-theme hue, also used on dark plates in both themes. */
  --color-project: #4b45d1;
  --color-project-dark: #a5a1ff;
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Core roles: only the identity lines above feed them. Neutral paper and graphite surfaces. */
  --color-bg: #f4f5f6;
  --color-surface: #e9ebed;
  --color-surface-raised: #fbfbfc;
  --color-surface-muted: #e2e5e8;
  /* The well: segmented and switch tracks, pressed buttons, selected radio cards, and disabled fields. */
  --color-well: var(--color-surface-muted);
  /* Fields (input, select, textarea, search): a white fill with a faint edge in light, the sunk well in dark.
     Dark fields stay sunk in the well. It sits within about 1.01:1 of the canvas, so the edge carries the shape. */
  --color-field-bg: var(--color-surface-raised);
  --color-field-edge: var(--color-border-subtle);
  --shadow-field: none;
  --color-control-thumb: var(--color-surface-raised);
  /* Selected rows lift and take a faint accent tint, so the selection reads on near-white panels too. */
  --color-nav-current: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-raised));
  /* Text on the current nav row, selected tab, and selected list row: the first of --color-accent, --color-text, black, and white
     that reaches 4.5:1 over --color-nav-current, on the page and on a surface. */
  --color-nav-current-text: var(--color-accent);
  /* The selected segmented label: the first of --color-accent, --color-text, black, and white that reaches
     4.5:1 on the thumb. An icon-only option needs 3:1. */
  --color-segmented-current-text: var(--color-accent);
  --color-row-hover: #e2e5e8;
  --color-row-selected: var(--color-surface-raised);
  --color-border-subtle: #d3d8dd;
  --color-border: #6d747b;
  --color-text: #101315;
  --color-muted: #50575e;
  --color-overlay: rgb(0 0 0 / 42%);

  /* The hue fills primary actions and marks selection; links keep --color-link. */
  --color-accent: var(--color-project);
  --color-accent-text: var(--color-bg);
  --color-accent-hover: var(--color-text);
  --color-button-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
  --color-link: #0b5f7c;
  /* One focus ring for every role: the accent, at 3:1 or more on --color-bg, --color-surface, and --color-surface-raised
     in both themes. Fields mark focus with their own accent edge instead; see components.md. */
  --color-focus: var(--color-accent);
  --focus-width: 2px;
  --focus-offset: 3px;

  /* Status: only for state, never for decoration. */
  --color-success: #157249;
  --color-warning: #86532e;
  --color-error: #bd342b;
  --color-info: #175cd3;
  --color-success-surface: #d9e5e1;
  --color-warning-surface: #e7e2de;
  --color-error-surface: #efe4e4;
  --color-info-surface: #d9e3f2;
  --color-status-ink: black;

  /* Identity layer, derived: terminal folio plates. Commands take the hue; captures stay neutral.
     A project without terminal plates leaves these unused. */
  --color-command-bg: color-mix(in srgb, var(--color-project) 25%, #101010);
  --color-command-border: transparent;
  --color-terminal: #0a0c0e;
  --color-terminal-text: #e6e9eb;
  --color-terminal-border: #2a3036;
  --color-terminal-caption: #13171a;
  --color-terminal-caption-text: #c9d0d6;
  /* The terminal capture's header stays dark in both appearances, so its selected tab keeps the dark lift. */
  --shadow-nav-current-dark: 0 1px 2px rgb(0 0 0 / 25%);

  /* Source code wells */
  --color-code: var(--color-surface);
  --color-code-text: var(--color-text);
  --color-syntax-keyword: #715b42;
  --color-syntax-string: #346347;
  --color-syntax-number: #86532e;
  --color-syntax-comment: #626772;

  /* Type scale. The identity block names the families. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2.75rem;
  --text-reading: 1rem;
  --text-display: 3.5rem;
  --text-display-sm: 2.125rem;
  --leading-tight: 1.25;
  --leading: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-tight: -0.03em;
  --text-code: 0.84375rem;

  /* Space: a 4px rhythm (0.25rem at the default 16px root). */
  --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-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Size */
  --control-sm: 2rem;
  --control-md: 2.25rem;
  --control-lg: 2.75rem;
  --row: 2.25rem;
  --measure: 68ch;
  --page-max: 960px;
  --page-wide: 1120px;
  --sidebar: 224px;

  /* Shape */
  --radius-inline: 6px;
  --radius-control: 999px;
  --radius-panel: 16px;
  --radius-field: 10px;
  --radius-pill: 999px;

  /* Elevation: DESIGN.md#depth assigns each tier. Idle controls and surfaces take no outer light
     highlight and no blur wider than 2px. */
  --shadow-raise: 0 1px 2px rgb(16 24 40 / 12%), 0 0 0 1px rgb(16 24 40 / 6%);
  --shadow-surface: 0 1px 2px rgb(16 24 40 / 6%), 0 0 0 1px rgb(16 24 40 / 6%);
  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(130 142 158 / 35%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 80%);
  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
  --shadow-nav-current: 0 1px 3px rgb(130 142 158 / 40%);
  /* A focused field's inset line inside its accent or danger edge. It takes each theme's accent and danger. */
  --shadow-field-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
  --shadow-field-focus-invalid: inset 0 0 0 2px color-mix(in srgb, var(--color-error) 18%, transparent);

  /* Motion */
  --duration-fast: 120ms;
  --duration: 180ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-project: var(--color-project-dark);
    --color-bg: #0d1012;
    --color-surface: #13171a;
    --color-surface-raised: #181d21;
    --color-surface-muted: #20262b;
    --color-well: color-mix(in srgb, var(--color-bg) 87.5%, black);
    --color-field-bg: var(--color-well);
    --shadow-field: var(--shadow-sink);
    --color-control-thumb: color-mix(in srgb, var(--color-surface-raised) 88%, white);
    --color-nav-current: color-mix(in srgb, var(--color-accent) 20%, transparent);
    --color-row-hover: #20262b;
    --color-border-subtle: #262d33;
    --color-border: #78818a;
    --color-text: #e6e9eb;
    --color-muted: #9aa3ab;
    --color-overlay: rgb(0 0 0 / 62%);
    --color-link: #67c1df;
    --color-success: #4cc38a;
    --color-warning: #e2a54b;
    --color-error: #f0776c;
    --color-info: #84adff;
    --color-success-surface: #172d25;
    --color-warning-surface: #2f281b;
    --color-error-surface: #312020;
    --color-info-surface: #202938;
    --color-status-ink: var(--color-text);
    --color-command-bg: color-mix(in srgb, var(--color-project) 16%, black);
    --color-command-border: color-mix(in srgb, var(--color-project) 28%, black);
    --color-syntax-keyword: #d8c2a5;
    --color-syntax-string: #a8bd9c;
    --color-syntax-number: #d5b98c;
    --color-syntax-comment: #a0a6b1;
    --shadow-raise: inset 0 1px 0 rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 45%);
    --shadow-surface: 0 0 0 1px rgb(255 255 255 / 6%);
    --shadow-sink: inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%);
    --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
    --shadow-nav-current: var(--shadow-nav-current-dark);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-project: var(--color-project-dark);
  --color-bg: #0d1012;
  --color-surface: #13171a;
  --color-surface-raised: #181d21;
  --color-surface-muted: #20262b;
  --color-well: color-mix(in srgb, var(--color-bg) 87.5%, black);
  --color-field-bg: var(--color-well);
  --shadow-field: var(--shadow-sink);
  --color-control-thumb: color-mix(in srgb, var(--color-surface-raised) 88%, white);
  --color-nav-current: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-row-hover: #20262b;
  --color-border-subtle: #262d33;
  --color-border: #78818a;
  --color-text: #e6e9eb;
  --color-muted: #9aa3ab;
  --color-overlay: rgb(0 0 0 / 62%);
  --color-link: #67c1df;
  --color-success: #4cc38a;
  --color-warning: #e2a54b;
  --color-error: #f0776c;
  --color-info: #84adff;
  --color-success-surface: #172d25;
  --color-warning-surface: #2f281b;
  --color-error-surface: #312020;
  --color-info-surface: #202938;
  --color-status-ink: var(--color-text);
  --color-command-bg: color-mix(in srgb, var(--color-project) 16%, black);
  --color-command-border: color-mix(in srgb, var(--color-project) 28%, black);
  --color-syntax-keyword: #d8c2a5;
  --color-syntax-string: #a8bd9c;
  --color-syntax-number: #d5b98c;
  --color-syntax-comment: #a0a6b1;
  --shadow-raise: inset 0 1px 0 rgb(255 255 255 / 7%), 0 1px 2px rgb(0 0 0 / 45%);
  --shadow-surface: 0 0 0 1px rgb(255 255 255 / 6%);
  --shadow-sink: inset 1.2px 1.2px 3.6px rgb(0 0 0 / 55%), inset -1.2px -1.2px 3.6px rgb(255 255 255 / 5%);
  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border-subtle);
  --shadow-nav-current: var(--shadow-nav-current-dark);
}

/* Minimal base. Component styles live in components.html. The base sits in a layer, so any
   page or component rule outranks it whatever its specificity. A layered !important outranks an
   unlayered one, so reduced-motion exceptions belong here too. */
/* The page's own background and text colour stay outside the layer. A host that wraps the page in
   its own unlayered reset, such as an artifact viewer, would otherwise keep its body colours while
   the tokens switch to dark, leaving token-coloured text on the wrong background. */
body { background: var(--color-bg); color: var(--color-text); }
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    font: var(--weight-regular) var(--text-md) / var(--leading) var(--font-ui);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, p { margin: 0; }
  h1, h2, h3, h4 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
  code, kbd, pre { font-family: var(--font-mono); }
  table, .num { font-variant-numeric: tabular-nums; }
  a { color: var(--color-link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  p a, dd a { text-decoration: underline; text-underline-offset: 0.18em; }
  :focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
    /* A busy spinner slows instead of stopping, so the busy state stays visible. */
    [aria-busy="true"]::before { animation-duration: 1.4s !important; }
  }
}