/* ============================================================================
 * css/tokens/base.css — the frame's tokens (docs/BUNDLE_CONTRACT.md §5, §13)
 *
 * The --k-* set is what the chrome reads, here with neutral defaults. Each
 * default sits inside :where(), so a product's :root[data-face="<id>"] sheet
 * wins at any specificity and in any order. The kyr-shell/1 names a bundle
 * may alias are derived from them at the end, so they follow the face.
 * ==========================================================================*/

:where(:root) {
  --k-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --k-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --k-bg: #f6f7f8;
  --k-surface: #ffffff;
  --k-surface-2: #eff1f3;
  --k-ink: #17191c;
  --k-ink-2: #5d646e;
  --k-line: #e1e4e8;
  --k-accent: #2a2e35;
  --k-on-accent: #ffffff;
  --k-focus: #3a6ee8;
  --k-danger: #c0362c;
  --k-warn: #9a5b00;
  --k-ok: #1f7a45;
  --k-radius: 8px;
  --k-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 12px 32px rgb(16 24 40 / 0.14);
  --k-rail-bg: #f1f2f4;
  --k-rail-ink: #454c56;
  --k-rail-active-bg: #e2e5e9;
  --k-rail-active-ink: #17191c;
  /* 1.11.0 (§15), each optional for a face: the depth of a sheet and of what is raised, the mark of the place one is at on the
     rail, and eight index tones a product gives its windows (on the content, and on the rail's own ground) */
  --k-shadow-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 2px 8px rgb(16 24 40 / 0.05);
  --k-shadow-2: 0 2px 4px rgb(16 24 40 / 0.06), 0 12px 28px rgb(16 24 40 / 0.12);
  --k-rail-accent: var(--k-accent);
  --k-tone-1: #3559d6;
  --k-tone-2: #0d7a6f;
  --k-tone-3: #b26200;
  --k-tone-4: #a03fa8;
  --k-tone-5: #c2410c;
  --k-tone-6: #6d48c8;
  --k-tone-7: #5c6b80;
  --k-tone-8: #b42345;
  --k-rail-tone-1: var(--k-tone-1);
  --k-rail-tone-2: var(--k-tone-2);
  --k-rail-tone-3: var(--k-tone-3);
  --k-rail-tone-4: var(--k-tone-4);
  --k-rail-tone-5: var(--k-tone-5);
  --k-rail-tone-6: var(--k-tone-6);
  --k-rail-tone-7: var(--k-tone-7);
  --k-rail-tone-8: var(--k-tone-8);
}

:where(:root[data-theme="dark"]) {
  color-scheme: dark;
  --k-bg: #121417;
  --k-surface: #191c20;
  --k-surface-2: #20242a;
  --k-ink: #eceef1;
  --k-ink-2: #9ca3ad;
  --k-line: #2c3138;
  --k-accent: #eceef1;
  --k-on-accent: #121417;
  --k-focus: #7aa2ff;
  --k-danger: #ff6b5e;
  --k-warn: #f0b429;
  --k-ok: #4cc07a;
  --k-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);
  --k-rail-bg: #16191c;
  --k-rail-ink: #b4bac3;
  --k-rail-active-bg: #262a30;
  --k-rail-active-ink: #f4f5f7;
  --k-shadow-1: 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.03);
  --k-shadow-2: 0 2px 6px rgb(0 0 0 / 0.5), 0 14px 32px rgb(0 0 0 / 0.42);
  --k-tone-1: #8ea6ff;
  --k-tone-2: #45d3c2;
  --k-tone-3: #f2b04c;
  --k-tone-4: #e08ae6;
  --k-tone-5: #ff9a66;
  --k-tone-6: #b49cff;
  --k-tone-7: #a8b6c8;
  --k-tone-8: #ff8fa6;
}

/* the kyr-shell/1 names (§5): stable, derived, never set by a bundle */
:root {
  --font-base: var(--k-font-ui);
  --font-mono: var(--k-font-mono);
  --color-bg: var(--k-bg);
  --color-surface: var(--k-surface);
  --color-elevated: var(--k-surface-2);
  --color-border: var(--k-line);
  --color-text: var(--k-ink);
  --color-muted: var(--k-ink-2);
  --color-ink-strong: var(--k-on-accent);
  --color-accent: var(--k-accent);
  --color-accent-strong: color-mix(in srgb, var(--k-accent) 84%, var(--k-ink));
  --color-brand: var(--k-accent);
  --color-ok: var(--k-ok);
  --color-warn: var(--k-warn);
  --color-err: var(--k-danger);
  --color-grid: color-mix(in srgb, var(--k-accent) 6%, transparent);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-focus: 0 0 0 2px var(--k-focus);
  --shadow-overlay: var(--k-shadow);
  --radius-xs: calc(var(--k-radius) * 0.375);
  --radius-sm: calc(var(--k-radius) * 0.5);
  --radius-md: calc(var(--k-radius) * 0.75);
  --radius-xl: var(--k-radius);
  --page-max-width: 1200px;
  --page-pad-x: clamp(1rem, 2.5vw, 2.5rem);
  --page-pad-y: 1.5rem;
  --gap-sm: 0.75rem;
  --gap-md: 1.25rem;
  --gap-lg: 1.1rem;
  --transition-base: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}