/* Vendored from ~/.agents/design/kit/tokens/theme.css on 2026-11-08. Do not edit here: change the kit, then re-copy. Project overrides live in ../vanity.css. */
/* Base tokens. Dark first; the light block below is derived from it.
   Three layers: ladders (12-step neutral and accent scales with alpha variants, Radix method as in tape),
   semantic roles that point at ladder steps, and shadcn names that point at roles so shadcn components
   keep working. Components read roles only. A project or preset re-points roles; it never edits components.
   Contrast and step rules are checked by scripts/check-kit.mjs (text 4.5:1, line and focus 3:1,
   ground to surface to raised at least 3 OKLCH lightness points per step). */

:root {
  /* ---------------------------------------------------------------- Type */
  /* One body face carries text, controls and numbers (tabular figures). Display swaps per project.
     Mono is the address and code face only: .addr and .code-pre. No component defaults to it. */
  --font-sans: var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Closed type ramp, 7 steps (hexx's ramp floored to the core: nothing under 12px between frames) */
  --type-label: max(12px, 0.75rem); /* 12: chips, captions, kbd, table heads */
  --type-small: max(12px, 0.8125rem); /* 13: secondary text, field hints */
  --type-body: 0.875rem; /* 14: app body, controls, panel titles */
  --type-reading: 1rem; /* 16: reading body, phone inputs */
  --type-head: 1.125rem; /* 18: section heads, lead, metrics */
  --type-figure: 1.5rem; /* 24: page titles, key figures */
  --type-title: 2.25rem; /* 36: display figures and titles */
  --leading-display: 1.1;
  --leading-tight: 1.3;
  --leading-body: 1.5;
  --leading-reading: 1.65;
  --tracking-display: -0.025em;

  /* ---------------------------------------------------------------- Space, size, shape */
  /* One spacing scale: 4 8 12 16 24 32 48 64 96 128 (rem, so it rides the scaling system) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout rhythm: one gutter, one section pair (desktop 96, mobile 64) */
  --gutter: var(--s-6);
  --section-space: var(--s-9);
  --header-height: var(--s-7);
  --scroll-offset: calc(var(--header-height) + var(--s-4));

  /* Controls: 28 / 32 / 36 tall on app surfaces; 44 hit area on coarse pointers */
  --control-sm: 1.75rem;
  --control-md: 2rem;
  --control-lg: 2.25rem;
  --hit: 2.75rem;

  /* Radius: exactly three values. Dots, meters and cursors stay square (no radius). */
  --radius-control: 0.375rem; /* 6px: buttons, inputs, chips, menu items */
  --radius-panel: 0.625rem; /* 10px: panels, popovers, dialogs, toasts */
  --radius-pill: 999px; /* switches, counts, round state dots */

  /* ---------------------------------------------------------------- Motion */
  --duration-fast: 120ms; /* hover, press, colour */
  --duration-quick: 180ms; /* menus, tooltips, dialogs in */
  --duration-base: 250ms; /* tabs, sheets, toggles */
  --duration-slow: 450ms; /* larger moves */
  --duration-long: 800ms; /* the one authored moment, spinners */
  --stagger: 60ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* interface default */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* things that cross the screen */
  --ease-linear: linear; /* constant motion: tickers, spinners */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* the authored moment */
  /* Osmo identity curves, kept for projects that already use them; components use the four above */
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-energy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.38, 0.005, 0.215, 1);
  --ease-punch: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-relaxed: cubic-bezier(0.7, 0, 0.3, 1);
}

/* ---------------------------------------------------------------- Ladders, dark */
/* Also on .dark so a dark scope nested in a light page resolves its own ladders. */
:root,
.dark,
[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral, hue 265, chroma 0.004 to 0.011. 1 ground, 2 surface, 3 raised, 4 hover, 5 pressed and row line,
     8 field line (3:1), 10 dim text, 11 body text, 12 strong text. */
  --gray-1: #0d0e10;
  --gray-2: #161719;
  --gray-3: #1f2023;
  --gray-4: #27292c;
  --gray-5: #303236;
  --gray-6: #393c41;
  --gray-7: #4a4d53;
  --gray-8: #71747b;
  --gray-9: #83868d;
  --gray-10: #9b9ea5;
  --gray-11: #c8cacf;
  --gray-12: #edeef1;
  /* Alpha variants: white at the alpha that lands on the solid step over the ground */
  --gray-a1: #ffffff00;
  --gray-a2: #ffffff0a;
  --gray-a3: #ffffff13;
  --gray-a4: #ffffff1d;
  --gray-a5: #ffffff27;
  --gray-a6: #ffffff31;
  --gray-a7: #ffffff43;
  --gray-a8: #ffffff6d;
  --gray-a9: #ffffff80;
  --gray-a10: #ffffff9a;
  --gray-a11: #ffffffc8;
  --gray-a12: #ffffffee;

  /* Accent, violet, hue 288. 9 is the solid accent, 10 its hover, 11 accent text, 4 the soft tint. */
  --accent-1: #13121c;
  --accent-2: #1a182a;
  --accent-3: #252142;
  --accent-4: #2f2856;
  --accent-5: #392f6b;
  --accent-6: #463a81;
  --accent-7: #594b9e;
  --accent-8: #7565c9;
  --accent-9: #a79aff;
  --accent-10: #b7adff;
  --accent-11: #c7c1ff;
  --accent-12: #e9e8ff;
  --accent-a1: #b7adff09;
  --accent-a2: #b7adff15;
  --accent-a3: #b7adff28;
  --accent-a4: #b7adff38;
  --accent-a5: #b7adff48;
  --accent-a6: #b7adff5c;
  --accent-a7: #b7adff79;
  --accent-a8: #b7adffa4;
  --accent-a9: #b7adffed;
  --accent-a10: #b7adffff;
  --accent-a11: #c7c1ffff;
  --accent-a12: #e9e8ffff;

  /* Signals: state only (up and down, live, stale, failed), never decoration */
  --positive: #65d68a;
  --negative: #ff7670;
  --warning: #f7bc50;
  --info: #6bc3f4;

  --shadow-pop: 0 0.75rem 2rem -0.5rem #00000099;
}

/* Light ladders. The neutral ladder runs light to dark; ground sits one step below the surface. */
.light,
[data-theme="light"] {
  color-scheme: light;

  --gray-1: #fcfdfd;
  --gray-2: #eff0f2;
  --gray-3: #e8e9ec;
  --gray-4: #dee0e3;
  --gray-5: #d4d6da;
  --gray-6: #caccd1;
  --gray-7: #b8bac0;
  --gray-8: #7d8086;
  --gray-9: #6e7278;
  --gray-10: #60636a;
  --gray-11: #3f4249;
  --gray-12: #14161b;
  /* Alpha variants: black over white */
  --gray-a1: #00000002;
  --gray-a2: #0000000f;
  --gray-a3: #00000015;
  --gray-a4: #0000001f;
  --gray-a5: #00000028;
  --gray-a6: #00000032;
  --gray-a7: #00000044;
  --gray-a8: #0000007e;
  --gray-a9: #0000008c;
  --gray-a10: #0000009b;
  --gray-a11: #000000bc;
  --gray-a12: #000000e8;

  --accent-1: #f9f9ff;
  --accent-2: #f2f2ff;
  --accent-3: #e6e4ff;
  --accent-4: #dbd9ff;
  --accent-5: #cec9ff;
  --accent-6: #bdb7fe;
  --accent-7: #a79ef2;
  --accent-8: #897ae1;
  --accent-9: #6346c7;
  --accent-10: #5635b6;
  --accent-11: #553cac;
  --accent-12: #22144d;
  --accent-a1: #2a0a8a04;
  --accent-a2: #2a0a8a0a;
  --accent-a3: #2a0a8a13;
  --accent-a4: #2a0a8a1c;
  --accent-a5: #2a0a8a26;
  --accent-a6: #2a0a8a34;
  --accent-a7: #2a0a8a4e;
  --accent-a8: #2a0a8a73;
  --accent-a9: #2a0a8aa7;
  --accent-a10: #2a0a8abf;
  --accent-a11: #2a0a8ac4;
  --accent-a12: #22144dff;

  --positive: #007136;
  --negative: #ba1e20;
  --warning: #875300;
  --info: #00649e;

  --shadow-pop: 0 0.75rem 2rem -0.5rem #14161b2e;
}

/* ---------------------------------------------------------------- Roles, dark */
/* Redeclared on every theme scope because var() resolves where it is declared. */
:root,
.dark,
[data-theme="dark"] {
  --ground: var(--gray-1);
  --surface: var(--gray-2);
  --raised: var(--gray-3);
  --raised-hover: var(--gray-4);
  --raised-active: var(--gray-5);
  --overlay: var(--gray-3); /* tooltips, popovers, dialogs, toasts */
  --line-row: var(--gray-5); /* quiet divider between table rows, kv rows, list rows */
  --line: var(--gray-8); /* field and control boundary, 3:1 */
  --text-strong: var(--gray-12);
  --text-body: var(--gray-11);
  --text-dim: var(--gray-10);
  --accent: var(--accent-9);
  --accent-hover: var(--accent-10);
  --accent-ink: var(--gray-1); /* text on the accent */
  --accent-text: var(--accent-11); /* accent as text: active item, key figure */
  --accent-soft: var(--accent-a4); /* selected tint */
  --focus: var(--accent-9);
  --veil: var(--gray-a3); /* hover over any surface */
  --scrim: var(--gray-1);
}

/* ---------------------------------------------------------------- Roles, light */
.light,
[data-theme="light"] {
  --ground: var(--gray-2);
  --surface: var(--gray-1);
  --raised: var(--gray-3);
  --raised-hover: var(--gray-4);
  --raised-active: var(--gray-5);
  --overlay: var(--gray-1);
  --line-row: var(--gray-5);
  --line: var(--gray-8);
  --text-strong: var(--gray-12);
  --text-body: var(--gray-11);
  --text-dim: var(--gray-10);
  --accent: var(--accent-9);
  --accent-hover: var(--accent-10);
  --accent-ink: var(--gray-1);
  --accent-text: var(--accent-11);
  --accent-soft: var(--accent-a4);
  --focus: var(--accent-9);
  --veil: var(--gray-a3);
  --scrim: var(--gray-12);
}

/* ---------------------------------------------------------------- shadcn names */
/* shadcn's own --accent (a hover tone) is not declared here: --accent is the kit's one accent.
   The Tailwind bridge maps shadcn's accent utilities to --raised. */
:root,
.dark,
[data-theme="dark"],
.light,
[data-theme="light"] {
  --background: var(--ground);
  --foreground: var(--text-strong);
  --card: var(--surface);
  --card-foreground: var(--text-strong);
  --popover: var(--overlay);
  --popover-foreground: var(--text-strong);
  --primary: var(--accent); /* the primary action; a preset may point it at --text-strong */
  --primary-hover: var(--accent-hover);
  --primary-foreground: var(--accent-ink);
  --secondary: var(--raised);
  --secondary-foreground: var(--text-strong);
  --muted: var(--raised);
  --muted-foreground: var(--text-dim);
  --border: var(--line-row);
  --input: var(--line);
  --ring: var(--focus);
  --destructive: var(--negative);
  --radius: var(--radius-panel);

  --chart-1: var(--accent);
  --chart-2: var(--positive);
  --chart-3: var(--info);
  --chart-4: var(--warning);
  --chart-5: var(--negative);

  --sidebar: var(--surface);
  --sidebar-foreground: var(--text-strong);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--raised);
  --sidebar-accent-foreground: var(--text-strong);
  --sidebar-border: var(--line-row);
  --sidebar-ring: var(--focus);
}

@media screen and (max-width: 767px) {
  :root {
    --gutter: var(--s-4);
    --section-space: var(--s-8);
  }
}