/* THE TOKENS — the whole colour, type, space and motion vocabulary of the kit. The public half is the
   shadcn/ui variable contract, so any shadcn or tweakcn palette drops in; every `--lotics-*` derives from
   it (`docs/theming.md`). The one sheet allowed a literal colour, type size or z-index, because nothing
   here selects a component or paints. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.tokens {
  /* ─── The public contract ─── Light on `:root, .light` so `.light` returns a subtree to light inside a
     dark shell; `.dark` follows, since the two tie on specificity and order breaks the tie. */
  :root,
  .light {
    color-scheme: light;

    --background: #ffffff;
    --foreground: #18181b;
    --card: #ffffff;
    --card-foreground: #18181b;
    --popover: #ffffff;
    --popover-foreground: #18181b;
    --primary: #18181b;
    --primary-foreground: #ffffff;
    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --muted: #f4f4f5;
    /* Between two rungs: no rung both recedes and holds the AA floor (`text_ink_contrast.test.ts` holds
       both ends). */
    --muted-foreground: color-mix(in srgb, var(--lotics-zinc-500) 65%, var(--lotics-zinc-600));
    --accent: #f4f4f5;
    --accent-foreground: #18181b;
    /* A destructive control rests on a wash of it and, pointed at, turns solid under its foreground. */
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #18181b;

    /* Not shadcn's `--accent`, a neutral interaction ground: mapping onto it would paint every menu hover
       blue. */
    --lotics-accent: #2563eb;
    --lotics-accent-wash: color-mix(in srgb, var(--lotics-accent) 7%, transparent);

    --lotics-ink-inactive: var(--lotics-zinc-400);
    --lotics-ink-danger: var(--lotics-red-900);
    --lotics-ink-warning: var(--lotics-amber-700);
    --lotics-ink-success: var(--lotics-emerald-700);

    /* A tone is a role resolved per theme — ground, edge, ink and solid — because a sheet reaching a rung
       froze that surface in light. Light wash is the 50 rung under 900 ink, dark the 950; the five
       achromatic families take 100 and 800, since their 50 and 950 are the canvas. `tone_register.test.ts`
       measures every pair. */
    --lotics-tone-red: var(--lotics-red-50);
    --lotics-tone-red-strong: var(--lotics-red-100);
    --lotics-tone-red-ink: var(--lotics-red-900);
    --lotics-tone-orange: var(--lotics-orange-50);
    --lotics-tone-orange-strong: var(--lotics-orange-100);
    --lotics-tone-orange-ink: var(--lotics-orange-900);
    --lotics-tone-amber: var(--lotics-amber-50);
    --lotics-tone-amber-strong: var(--lotics-amber-100);
    --lotics-tone-amber-ink: var(--lotics-amber-900);
    --lotics-tone-yellow: var(--lotics-yellow-50);
    --lotics-tone-yellow-strong: var(--lotics-yellow-100);
    --lotics-tone-yellow-ink: var(--lotics-yellow-900);
    --lotics-tone-lime: var(--lotics-lime-50);
    --lotics-tone-lime-strong: var(--lotics-lime-100);
    --lotics-tone-lime-ink: var(--lotics-lime-900);
    --lotics-tone-green: var(--lotics-green-50);
    --lotics-tone-green-strong: var(--lotics-green-100);
    --lotics-tone-green-ink: var(--lotics-green-900);
    --lotics-tone-emerald: var(--lotics-emerald-50);
    --lotics-tone-emerald-strong: var(--lotics-emerald-100);
    --lotics-tone-emerald-ink: var(--lotics-emerald-900);
    --lotics-tone-teal: var(--lotics-teal-50);
    --lotics-tone-teal-strong: var(--lotics-teal-100);
    --lotics-tone-teal-ink: var(--lotics-teal-900);
    --lotics-tone-cyan: var(--lotics-cyan-50);
    --lotics-tone-cyan-strong: var(--lotics-cyan-100);
    --lotics-tone-cyan-ink: var(--lotics-cyan-900);
    --lotics-tone-sky: var(--lotics-sky-50);
    --lotics-tone-sky-strong: var(--lotics-sky-100);
    --lotics-tone-sky-ink: var(--lotics-sky-900);
    --lotics-tone-blue: var(--lotics-blue-50);
    --lotics-tone-blue-strong: var(--lotics-blue-100);
    --lotics-tone-blue-ink: var(--lotics-blue-900);
    --lotics-tone-indigo: var(--lotics-indigo-50);
    --lotics-tone-indigo-strong: var(--lotics-indigo-100);
    --lotics-tone-indigo-ink: var(--lotics-indigo-900);
    --lotics-tone-violet: var(--lotics-violet-50);
    --lotics-tone-violet-strong: var(--lotics-violet-100);
    --lotics-tone-violet-ink: var(--lotics-violet-900);
    --lotics-tone-purple: var(--lotics-purple-50);
    --lotics-tone-purple-strong: var(--lotics-purple-100);
    --lotics-tone-purple-ink: var(--lotics-purple-900);
    --lotics-tone-fuchsia: var(--lotics-fuchsia-50);
    --lotics-tone-fuchsia-strong: var(--lotics-fuchsia-100);
    --lotics-tone-fuchsia-ink: var(--lotics-fuchsia-900);
    --lotics-tone-pink: var(--lotics-pink-50);
    --lotics-tone-pink-strong: var(--lotics-pink-100);
    --lotics-tone-pink-ink: var(--lotics-pink-900);

    /* A solid rung pair (`constitution.md` §8's exception), dealt in `identity.ts`'s order: a wash would
       read as one more status pill. `identity_hue.test.ts` measures every pair. */
    --lotics-identity-cyan: var(--lotics-cyan-200);
    --lotics-identity-cyan-ink: var(--lotics-cyan-800);
    --lotics-identity-orange: var(--lotics-orange-200);
    --lotics-identity-orange-ink: var(--lotics-orange-800);
    --lotics-identity-green: var(--lotics-green-200);
    --lotics-identity-green-ink: var(--lotics-green-800);
    --lotics-identity-teal: var(--lotics-teal-200);
    --lotics-identity-teal-ink: var(--lotics-teal-800);
    --lotics-identity-blue: var(--lotics-blue-200);
    --lotics-identity-blue-ink: var(--lotics-blue-800);
    --lotics-identity-indigo: var(--lotics-indigo-200);
    --lotics-identity-indigo-ink: var(--lotics-indigo-800);
    --lotics-identity-violet: var(--lotics-violet-200);
    --lotics-identity-violet-ink: var(--lotics-violet-800);
    --lotics-identity-pink: var(--lotics-pink-200);
    --lotics-identity-pink-ink: var(--lotics-pink-800);

    --lotics-tone-rose: var(--lotics-rose-50);
    --lotics-tone-rose-strong: var(--lotics-rose-100);
    --lotics-tone-rose-ink: var(--lotics-rose-900);
    --lotics-tone-slate: var(--lotics-slate-100);
    --lotics-tone-slate-strong: var(--lotics-slate-200);
    --lotics-tone-slate-ink: var(--lotics-slate-900);
    --lotics-tone-gray: var(--lotics-gray-100);
    --lotics-tone-gray-strong: var(--lotics-gray-200);
    --lotics-tone-gray-ink: var(--lotics-gray-900);
    --lotics-tone-zinc: var(--lotics-zinc-100);
    --lotics-tone-zinc-strong: var(--lotics-zinc-200);
    --lotics-tone-zinc-ink: var(--lotics-zinc-900);
    --lotics-tone-neutral: var(--lotics-neutral-100);
    --lotics-tone-neutral-strong: var(--lotics-neutral-200);
    --lotics-tone-neutral-ink: var(--lotics-neutral-900);
    --lotics-tone-stone: var(--lotics-stone-100);
    --lotics-tone-stone-strong: var(--lotics-stone-200);
    --lotics-tone-stone-ink: var(--lotics-stone-900);
  }

  .dark {
    color-scheme: dark;

    --background: #09090b;
    --foreground: #fafafa;
    --card: #18181b;
    --card-foreground: #fafafa;
    --popover: #18181b;
    --popover-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted: #27272a;
    /* The same recession from the other side, between zinc-400 and zinc-500. */
    --muted-foreground: color-mix(in srgb, var(--lotics-zinc-400) 55%, var(--lotics-zinc-500));
    --accent: #27272a;
    --accent-foreground: #fafafa;
    /* Light's rung, not red-500: white holds 3.8:1 on that, under AA for a label. */
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #27272a;
    --input: #3f3f46;
    --ring: #d4d4d8;

    --lotics-accent: #60a5fa;
    /* 7% of a hue over a near-black ground is invisible. */
    --lotics-accent-wash: color-mix(in srgb, var(--lotics-accent) 18%, transparent);

    --lotics-ink-inactive: var(--lotics-zinc-500);
    --lotics-ink-danger: var(--lotics-red-400);
    --lotics-ink-warning: var(--lotics-amber-400);
    --lotics-ink-success: var(--lotics-emerald-400);

    /* The same four inverted: the deep rung grounds, the light rung letters. */
    --lotics-tone-red: var(--lotics-red-950);
    --lotics-tone-red-strong: var(--lotics-red-900);
    --lotics-tone-red-ink: var(--lotics-red-200);
    --lotics-tone-orange: var(--lotics-orange-950);
    --lotics-tone-orange-strong: var(--lotics-orange-900);
    --lotics-tone-orange-ink: var(--lotics-orange-200);
    --lotics-tone-amber: var(--lotics-amber-950);
    --lotics-tone-amber-strong: var(--lotics-amber-900);
    --lotics-tone-amber-ink: var(--lotics-amber-200);
    --lotics-tone-yellow: var(--lotics-yellow-950);
    --lotics-tone-yellow-strong: var(--lotics-yellow-900);
    --lotics-tone-yellow-ink: var(--lotics-yellow-200);
    --lotics-tone-lime: var(--lotics-lime-950);
    --lotics-tone-lime-strong: var(--lotics-lime-900);
    --lotics-tone-lime-ink: var(--lotics-lime-200);
    --lotics-tone-green: var(--lotics-green-950);
    --lotics-tone-green-strong: var(--lotics-green-900);
    --lotics-tone-green-ink: var(--lotics-green-200);
    --lotics-tone-emerald: var(--lotics-emerald-950);
    --lotics-tone-emerald-strong: var(--lotics-emerald-900);
    --lotics-tone-emerald-ink: var(--lotics-emerald-200);
    --lotics-tone-teal: var(--lotics-teal-950);
    --lotics-tone-teal-strong: var(--lotics-teal-900);
    --lotics-tone-teal-ink: var(--lotics-teal-200);
    --lotics-tone-cyan: var(--lotics-cyan-950);
    --lotics-tone-cyan-strong: var(--lotics-cyan-900);
    --lotics-tone-cyan-ink: var(--lotics-cyan-200);
    --lotics-tone-sky: var(--lotics-sky-950);
    --lotics-tone-sky-strong: var(--lotics-sky-900);
    --lotics-tone-sky-ink: var(--lotics-sky-200);
    --lotics-tone-blue: var(--lotics-blue-950);
    --lotics-tone-blue-strong: var(--lotics-blue-900);
    --lotics-tone-blue-ink: var(--lotics-blue-200);
    --lotics-tone-indigo: var(--lotics-indigo-950);
    --lotics-tone-indigo-strong: var(--lotics-indigo-900);
    --lotics-tone-indigo-ink: var(--lotics-indigo-200);
    --lotics-tone-violet: var(--lotics-violet-950);
    --lotics-tone-violet-strong: var(--lotics-violet-900);
    --lotics-tone-violet-ink: var(--lotics-violet-200);
    --lotics-tone-purple: var(--lotics-purple-950);
    --lotics-tone-purple-strong: var(--lotics-purple-900);
    --lotics-tone-purple-ink: var(--lotics-purple-200);
    --lotics-tone-fuchsia: var(--lotics-fuchsia-950);
    --lotics-tone-fuchsia-strong: var(--lotics-fuchsia-900);
    --lotics-tone-fuchsia-ink: var(--lotics-fuchsia-200);
    --lotics-tone-pink: var(--lotics-pink-950);
    --lotics-tone-pink-strong: var(--lotics-pink-900);
    --lotics-tone-pink-ink: var(--lotics-pink-200);

    /* The same pair inverted, so a mark is as solid on near-black as on white. */
    --lotics-identity-cyan: var(--lotics-cyan-900);
    --lotics-identity-cyan-ink: var(--lotics-cyan-300);
    --lotics-identity-orange: var(--lotics-orange-900);
    --lotics-identity-orange-ink: var(--lotics-orange-300);
    --lotics-identity-green: var(--lotics-green-900);
    --lotics-identity-green-ink: var(--lotics-green-300);
    --lotics-identity-teal: var(--lotics-teal-900);
    --lotics-identity-teal-ink: var(--lotics-teal-300);
    --lotics-identity-blue: var(--lotics-blue-900);
    --lotics-identity-blue-ink: var(--lotics-blue-300);
    --lotics-identity-indigo: var(--lotics-indigo-900);
    --lotics-identity-indigo-ink: var(--lotics-indigo-300);
    --lotics-identity-violet: var(--lotics-violet-900);
    --lotics-identity-violet-ink: var(--lotics-violet-300);
    --lotics-identity-pink: var(--lotics-pink-900);
    --lotics-identity-pink-ink: var(--lotics-pink-300);
    --lotics-tone-rose: var(--lotics-rose-950);
    --lotics-tone-rose-strong: var(--lotics-rose-900);
    --lotics-tone-rose-ink: var(--lotics-rose-200);
    --lotics-tone-slate: var(--lotics-slate-800);
    --lotics-tone-slate-strong: var(--lotics-slate-700);
    --lotics-tone-slate-ink: var(--lotics-slate-200);
    --lotics-tone-gray: var(--lotics-gray-800);
    --lotics-tone-gray-strong: var(--lotics-gray-700);
    --lotics-tone-gray-ink: var(--lotics-gray-200);
    --lotics-tone-zinc: var(--lotics-zinc-800);
    --lotics-tone-zinc-strong: var(--lotics-zinc-700);
    --lotics-tone-zinc-ink: var(--lotics-zinc-200);
    --lotics-tone-neutral: var(--lotics-neutral-800);
    --lotics-tone-neutral-strong: var(--lotics-neutral-700);
    --lotics-tone-neutral-ink: var(--lotics-neutral-200);
    --lotics-tone-stone: var(--lotics-stone-800);
    --lotics-tone-stone-strong: var(--lotics-stone-700);
    --lotics-tone-stone-ink: var(--lotics-stone-200);
  }

  /* The theme-independent half, on `:root` alone: declared on `.light`/`.dark` it would shadow a
     consumer's `:root` override inside themed subtrees (`tokens_scope.test.ts`). */
  :root {
    --radius: 0.625rem;
    --font-sans:
      Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono:
      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;
  }

  /* ─── The palette ─── 22 families × 11 shades, asserted against `color_tokens.ts`. Not themeable: a
     family name says what something is. */
  :root {
    /* For a glyph over imagery, which does not move with the theme. */
    --lotics-white: #ffffff;
    --lotics-black: #000000;
    --lotics-red-50: #fef2f2;
    --lotics-red-100: #fee2e2;
    --lotics-red-200: #fecaca;
    --lotics-red-300: #fca5a5;
    --lotics-red-400: #f87171;
    --lotics-red-500: #ef4444;
    --lotics-red-600: #dc2626;
    --lotics-red-700: #b91c1c;
    --lotics-red-800: #991b1b;
    --lotics-red-900: #7f1d1d;
    --lotics-red-950: #450a0a;

    --lotics-orange-50: #fff7ed;
    --lotics-orange-100: #ffedd5;
    --lotics-orange-200: #fed7aa;
    --lotics-orange-300: #fdba74;
    --lotics-orange-400: #fb923c;
    --lotics-orange-500: #f97316;
    --lotics-orange-600: #ea580c;
    --lotics-orange-700: #c2410c;
    --lotics-orange-800: #9a3412;
    --lotics-orange-900: #7c2d12;
    --lotics-orange-950: #431407;

    --lotics-amber-50: #fffbeb;
    --lotics-amber-100: #fef3c7;
    --lotics-amber-200: #fde68a;
    --lotics-amber-300: #fcd34d;
    --lotics-amber-400: #fbbf24;
    --lotics-amber-500: #f59e0b;
    --lotics-amber-600: #d97706;
    --lotics-amber-700: #b45309;
    --lotics-amber-800: #92400e;
    --lotics-amber-900: #78350f;
    --lotics-amber-950: #451a03;

    --lotics-yellow-50: #fefce8;
    --lotics-yellow-100: #fef9c3;
    --lotics-yellow-200: #fef08a;
    --lotics-yellow-300: #fde047;
    --lotics-yellow-400: #facc15;
    --lotics-yellow-500: #eab308;
    --lotics-yellow-600: #ca8a04;
    --lotics-yellow-700: #a16207;
    --lotics-yellow-800: #854d0e;
    --lotics-yellow-900: #713f12;
    --lotics-yellow-950: #422006;

    --lotics-lime-50: #f7fee7;
    --lotics-lime-100: #ecfccb;
    --lotics-lime-200: #d9f99d;
    --lotics-lime-300: #bef264;
    --lotics-lime-400: #a3e635;
    --lotics-lime-500: #84cc16;
    --lotics-lime-600: #65a30d;
    --lotics-lime-700: #4d7c0f;
    --lotics-lime-800: #3f6212;
    --lotics-lime-900: #365314;
    --lotics-lime-950: #1a2e05;

    --lotics-green-50: #f0fdf4;
    --lotics-green-100: #dcfce7;
    --lotics-green-200: #bbf7d0;
    --lotics-green-300: #86efac;
    --lotics-green-400: #4ade80;
    --lotics-green-500: #22c55e;
    --lotics-green-600: #16a34a;
    --lotics-green-700: #15803d;
    --lotics-green-800: #166534;
    --lotics-green-900: #14532d;
    --lotics-green-950: #052e16;

    --lotics-emerald-50: #ecfdf5;
    --lotics-emerald-100: #d1fae5;
    --lotics-emerald-200: #a7f3d0;
    --lotics-emerald-300: #6ee7b7;
    --lotics-emerald-400: #34d399;
    --lotics-emerald-500: #10b981;
    --lotics-emerald-600: #059669;
    --lotics-emerald-700: #047857;
    --lotics-emerald-800: #065f46;
    --lotics-emerald-900: #064e3b;
    --lotics-emerald-950: #022c22;

    --lotics-teal-50: #f0fdfa;
    --lotics-teal-100: #ccfbf1;
    --lotics-teal-200: #99f6e4;
    --lotics-teal-300: #5eead4;
    --lotics-teal-400: #2dd4bf;
    --lotics-teal-500: #14b8a6;
    --lotics-teal-600: #0d9488;
    --lotics-teal-700: #0f766e;
    --lotics-teal-800: #115e59;
    --lotics-teal-900: #134e4a;
    --lotics-teal-950: #042f2e;

    --lotics-cyan-50: #ecfeff;
    --lotics-cyan-100: #cffafe;
    --lotics-cyan-200: #a5f3fc;
    --lotics-cyan-300: #67e8f9;
    --lotics-cyan-400: #22d3ee;
    --lotics-cyan-500: #06b6d4;
    --lotics-cyan-600: #0891b2;
    --lotics-cyan-700: #0e7490;
    --lotics-cyan-800: #155e75;
    --lotics-cyan-900: #164e63;
    --lotics-cyan-950: #083344;

    --lotics-sky-50: #f0f9ff;
    --lotics-sky-100: #e0f2fe;
    --lotics-sky-200: #bae6fd;
    --lotics-sky-300: #7dd3fc;
    --lotics-sky-400: #38bdf8;
    --lotics-sky-500: #0ea5e9;
    --lotics-sky-600: #0284c7;
    --lotics-sky-700: #0369a1;
    --lotics-sky-800: #075985;
    --lotics-sky-900: #0c4a6e;
    --lotics-sky-950: #082f49;

    --lotics-blue-50: #eff6ff;
    --lotics-blue-100: #dbeafe;
    --lotics-blue-200: #bfdbfe;
    --lotics-blue-300: #93c5fd;
    --lotics-blue-400: #60a5fa;
    --lotics-blue-500: #3b82f6;
    --lotics-blue-600: #2563eb;
    --lotics-blue-700: #1d4ed8;
    --lotics-blue-800: #1e40af;
    --lotics-blue-900: #1e3a8a;
    --lotics-blue-950: #172554;

    --lotics-indigo-50: #eef2ff;
    --lotics-indigo-100: #e0e7ff;
    --lotics-indigo-200: #c7d2fe;
    --lotics-indigo-300: #a5b4fc;
    --lotics-indigo-400: #818cf8;
    --lotics-indigo-500: #6366f1;
    --lotics-indigo-600: #4f46e5;
    --lotics-indigo-700: #4338ca;
    --lotics-indigo-800: #3730a3;
    --lotics-indigo-900: #312e81;
    --lotics-indigo-950: #1e1b4b;

    --lotics-violet-50: #f5f3ff;
    --lotics-violet-100: #ede9fe;
    --lotics-violet-200: #ddd6fe;
    --lotics-violet-300: #c4b5fd;
    --lotics-violet-400: #a78bfa;
    --lotics-violet-500: #8b5cf6;
    --lotics-violet-600: #7c3aed;
    --lotics-violet-700: #6d28d9;
    --lotics-violet-800: #5b21b6;
    --lotics-violet-900: #4c1d95;
    --lotics-violet-950: #2e1065;

    --lotics-purple-50: #faf5ff;
    --lotics-purple-100: #f3e8ff;
    --lotics-purple-200: #e9d5ff;
    --lotics-purple-300: #d8b4fe;
    --lotics-purple-400: #c084fc;
    --lotics-purple-500: #a855f7;
    --lotics-purple-600: #9333ea;
    --lotics-purple-700: #7e22ce;
    --lotics-purple-800: #6b21a8;
    --lotics-purple-900: #581c87;
    --lotics-purple-950: #3b0764;

    --lotics-fuchsia-50: #fdf4ff;
    --lotics-fuchsia-100: #fae8ff;
    --lotics-fuchsia-200: #f5d0fe;
    --lotics-fuchsia-300: #f0abfc;
    --lotics-fuchsia-400: #e879f9;
    --lotics-fuchsia-500: #d946ef;
    --lotics-fuchsia-600: #c026d3;
    --lotics-fuchsia-700: #a21caf;
    --lotics-fuchsia-800: #86198f;
    --lotics-fuchsia-900: #701a75;
    --lotics-fuchsia-950: #4a044e;

    --lotics-pink-50: #fdf2f8;
    --lotics-pink-100: #fce7f3;
    --lotics-pink-200: #fbcfe8;
    --lotics-pink-300: #f9a8d4;
    --lotics-pink-400: #f472b6;
    --lotics-pink-500: #ec4899;
    --lotics-pink-600: #db2777;
    --lotics-pink-700: #be185d;
    --lotics-pink-800: #9d174d;
    --lotics-pink-900: #831843;
    --lotics-pink-950: #500724;

    --lotics-rose-50: #fff1f2;
    --lotics-rose-100: #ffe4e6;
    --lotics-rose-200: #fecdd3;
    --lotics-rose-300: #fda4af;
    --lotics-rose-400: #fb7185;
    --lotics-rose-500: #f43f5e;
    --lotics-rose-600: #e11d48;
    --lotics-rose-700: #be123c;
    --lotics-rose-800: #9f1239;
    --lotics-rose-900: #881337;
    --lotics-rose-950: #4c0519;

    --lotics-slate-50: #f8fafc;
    --lotics-slate-100: #f1f5f9;
    --lotics-slate-200: #e2e8f0;
    --lotics-slate-300: #cbd5e1;
    --lotics-slate-400: #94a3b8;
    --lotics-slate-500: #64748b;
    --lotics-slate-600: #475569;
    --lotics-slate-700: #334155;
    --lotics-slate-800: #1e293b;
    --lotics-slate-900: #0f172a;
    --lotics-slate-950: #020617;

    --lotics-gray-50: #f9fafb;
    --lotics-gray-100: #f3f4f6;
    --lotics-gray-200: #e5e7eb;
    --lotics-gray-300: #d1d5db;
    --lotics-gray-400: #9ca3af;
    --lotics-gray-500: #6b7280;
    --lotics-gray-600: #4b5563;
    --lotics-gray-700: #374151;
    --lotics-gray-800: #1f2937;
    --lotics-gray-900: #111827;
    --lotics-gray-950: #030712;

    --lotics-zinc-50: #fafafa;
    --lotics-zinc-100: #f4f4f5;
    --lotics-zinc-200: #e4e4e7;
    --lotics-zinc-300: #d4d4d8;
    --lotics-zinc-400: #a1a1aa;
    --lotics-zinc-500: #71717a;
    --lotics-zinc-600: #52525b;
    --lotics-zinc-700: #3f3f46;
    --lotics-zinc-800: #27272a;
    --lotics-zinc-900: #18181b;
    --lotics-zinc-950: #09090b;

    --lotics-neutral-50: #fafafa;
    --lotics-neutral-100: #f5f5f5;
    --lotics-neutral-200: #e5e5e5;
    --lotics-neutral-300: #d4d4d4;
    --lotics-neutral-400: #a3a3a3;
    --lotics-neutral-500: #737373;
    --lotics-neutral-600: #525252;
    --lotics-neutral-700: #404040;
    --lotics-neutral-800: #262626;
    --lotics-neutral-900: #171717;
    --lotics-neutral-950: #0a0a0a;

    --lotics-stone-50: #fafaf9;
    --lotics-stone-100: #f5f5f4;
    --lotics-stone-200: #e7e5e4;
    --lotics-stone-300: #d6d3d1;
    --lotics-stone-400: #a8a29e;
    --lotics-stone-500: #78716c;
    --lotics-stone-600: #57534e;
    --lotics-stone-700: #44403c;
    --lotics-stone-800: #292524;
    --lotics-stone-900: #1c1917;
    --lotics-stone-950: #0c0a09;
  }

  /* ─── Derived, THEMED ─── Mixes are `in srgb`; oklab gives a different colour. On all three scopes,
     because a custom property resolves its `var()`s on the declaring element — on `:root` alone it freezes
     at the root's theme. */
  :root,
  .light,
  .dark {
    /* The neutral ladder for a surface-grounded control; alpha, so it composites over any row ground. */
    --lotics-wash-hover: color-mix(in srgb, var(--foreground) 2%, transparent);
    --lotics-wash-selected: color-mix(in srgb, var(--foreground) 5%, transparent);
    --lotics-wash-press: color-mix(in srgb, var(--foreground) 12%, transparent);
    /* A delete control's resting tint, of `--destructive` so it follows the theme's destructive hue. */
    --lotics-wash-danger: color-mix(in srgb, var(--destructive) 12%, transparent);

    /* One rung up from the row: reaching a control means crossing its row. */
    --lotics-wash-control-hover: var(--lotics-wash-press);
    --lotics-wash-control-press: color-mix(in srgb, var(--foreground) 19%, transparent);

    /* Focus is the ring, hover a darker border. Colour only: a `border` shorthand resets `border-image`
       and fights `border-color` motion. */
    --lotics-border-hover: color-mix(in srgb, var(--foreground) 55%, var(--border));

    --lotics-ink-default: var(--foreground);
    --lotics-ink-muted: var(--muted-foreground);
    --lotics-ink-on-inverse: var(--primary-foreground);

    /* A placeholder is live text, not inactive (WCAG 1.4.3), so it cannot share `--lotics-ink-inactive`;
       mixed so it follows `--muted-foreground` (`text_ink_contrast.test.ts`). */
    --lotics-ink-placeholder: color-mix(in srgb, var(--muted-foreground) 95%, var(--background));

    /* What a sticky register head paints over passing rows; surfaces with their own ground re-point it, so
       no prop is needed. */
    --lotics-register-ground: var(--background);

    /* An edge, not a shadow, so it follows the theme. */
    --lotics-shadow-hairline: 0 1px 2px 0 var(--border);
  }

  /* ─── Derived, THEME-INDEPENDENT ─── On `:root` alone: nothing here reads a themed token. */
  :root {
    /* For a solid-role ground: on the default theme `--primary` is `--foreground`, so a foreground mix
       would paint near-black on near-black. Strengths, not colours — the component runs the mix. */
    --lotics-on-solid-hover: 10%;
    --lotics-on-solid-press: 18%;

    /* One treatment: a disabled control that changes hue reads as another variant. */
    --lotics-disabled-opacity: 0.5;

    --lotics-ring-width: 2px;

    /* One value in both themes and both languages (`solid()` in `@lotics/ui/colors`, held by
       `tokens_agreement.test.ts`). Each family's lightest rung clearing 3:1 on both canvases (WCAG
       1.4.11). */
    --lotics-tone-red-solid: var(--lotics-red-500);
    --lotics-tone-orange-solid: var(--lotics-orange-600);
    --lotics-tone-amber-solid: var(--lotics-amber-600);
    --lotics-tone-yellow-solid: var(--lotics-yellow-700);
    --lotics-tone-lime-solid: var(--lotics-lime-600);
    --lotics-tone-green-solid: var(--lotics-green-600);
    --lotics-tone-emerald-solid: var(--lotics-emerald-600);
    --lotics-tone-teal-solid: var(--lotics-teal-600);
    --lotics-tone-cyan-solid: var(--lotics-cyan-600);
    --lotics-tone-sky-solid: var(--lotics-sky-600);
    --lotics-tone-blue-solid: var(--lotics-blue-500);
    --lotics-tone-indigo-solid: var(--lotics-indigo-500);
    --lotics-tone-violet-solid: var(--lotics-violet-500);
    --lotics-tone-purple-solid: var(--lotics-purple-500);
    --lotics-tone-fuchsia-solid: var(--lotics-fuchsia-500);
    --lotics-tone-pink-solid: var(--lotics-pink-500);
    --lotics-tone-rose-solid: var(--lotics-rose-500);
    --lotics-tone-slate-solid: var(--lotics-slate-500);
    --lotics-tone-gray-solid: var(--lotics-gray-500);
    --lotics-tone-zinc-solid: var(--lotics-zinc-500);
    --lotics-tone-neutral-solid: var(--lotics-neutral-500);
    --lotics-tone-stone-solid: var(--lotics-stone-500);

    /* Spacing, named by pixel as the layout primitives take it (`gap={12}`); ten rungs. 8 between peers, 4
       inside a pair, 2 hairline; 6, 10, 12 for control interiors only; 16/24/32/48 for regions. */
    --lotics-space-2: 2px;
    --lotics-space-4: 4px;
    --lotics-space-6: 6px;
    --lotics-space-8: 8px;
    --lotics-space-10: 10px;
    --lotics-space-12: 12px;
    --lotics-space-16: 16px;
    --lotics-space-24: 24px;
    --lotics-space-32: 32px;
    --lotics-space-48: 48px;
    /* One gutter for a list and its record, or content slides on navigation. `--lotics-page-pad` serves a
       surface with no container; one with a container picks from the pair. */
    --lotics-page-pad-narrow: var(--lotics-space-16);
    --lotics-page-pad-wide: var(--lotics-space-32);
    --lotics-page-pad: var(--lotics-page-pad-narrow);
    /* Declared at the root so a band written for a dialog reads the same rung anywhere. */
    --lotics-dialog-gutter: var(--lotics-space-16);
    --lotics-row-wash-bleed: var(--lotics-space-12);

    --lotics-control-height: 40px;
    --lotics-control-content-height: 28px;
    /* (40 − 28) / 2 − 1: the border is part of the air. */
    --lotics-control-pad-y: 5px;
    --lotics-control-pad-x: 8px;
    /* Border + padding, for a hanging line to align to. */
    --lotics-control-text-inset: 9px;
    /* Operable and readable floors; a `Table` flex column and a heading's title column read the second
       too. */
    --lotics-control-min-width: 160px;
    --lotics-value-min-width: 200px;
    /* A short value's control beside its label — a number, money, a day, a choice: its value whole, never
       stretched across a reading column, one width so such controls start and end down one line. */
    --lotics-control-short-width: 240px;

    /* One geometry for `Table`, `DataGrid`, `StateMatrix` and `Timetable`. The row is the control height
       because a pressable cell's box is the target; a shorter head reads as a first row. Column gaps:
       words take the control interior, glyphs of one object the hairline (a matrix's cells, items, keep
       their own rhythm in `state_matrix.css`). */
    --lotics-register-row: var(--lotics-control-height);
    --lotics-register-head: var(--lotics-register-row);
    --lotics-register-inset: var(--lotics-space-24);
    --lotics-register-cell-gap: var(--lotics-space-2);
    /* The floor of every row carrying a subject, 72. A floor: the row is its content between two insets,
       and `TableRow`'s `minHeight` may lower it. */
    --lotics-row-beat: calc(var(--lotics-register-row) + var(--lotics-space-32));
    /* A row's block padding (§2), above and below whatever it holds; a row's 56 picture stands 76. */
    --lotics-row-inset: var(--lotics-space-10);
    /* The unit of `TableColumn.lines`: `CellStack`'s tight line box, so they agree by construction. */
    --lotics-register-line: var(--lotics-leading-tight-sm);

    /* THE MARK SCALE (`mark.ts`): every mark that leads — a face, initials, a picture, a document's badge, the
       placeholder for one — is one of these squares, and a list draws all its leads at one. `md` is the largest
       mark a 40px band seats; `lg` is a mark that is a control. */
    /* A mark on a line of words: the xs line box's own height, so the line never grows for it. */
    --lotics-mark-xs: 16px;
    --lotics-mark-sm: 24px;
    --lotics-mark-md: var(--lotics-control-content-height);
    --lotics-mark-lg: var(--lotics-control-height);
    --lotics-mark-xl: 56px;
    --lotics-mark-xxl: 72px;
    /* The one mark-to-label gap: 10, not 8, since 8 reads tighter beside a round object. */
    --lotics-lead-gap: var(--lotics-space-10);

    /* Four rungs by altitude, never size, proportional to `--radius` as shadcn derives
       `--radius-sm/md/lg/xl` (× 0.6 / 0.8 / 1 / 1.4), so a tweakcn export scales both alike. `card` is
       shadcn's `xl`; `overlay` one step more. */
    --lotics-radius-control: var(--radius);
    --lotics-radius-card: calc(var(--radius) * 1.4);
    --lotics-radius-overlay: calc(var(--radius) * 2);
    --lotics-radius-full: 9999px;

    /* Anchored on their own colour, since a shadow stays dark in a dark theme. */
    --lotics-shadow-color: var(--lotics-zinc-950);
    --lotics-shadow-raised: 0 0 6px 1px color-mix(in srgb, var(--lotics-shadow-color) 19%, transparent);
    --lotics-shadow-panel: -8px 0 24px color-mix(in srgb, var(--lotics-shadow-color) 8%, transparent);
    /* Here, not with the themed washes, because what it dims is usually a photograph, which does not
       invert. */
    --lotics-scrim-hover: color-mix(in srgb, var(--lotics-shadow-color) 6%, transparent);
    --lotics-scrim-press: color-mix(in srgb, var(--lotics-shadow-color) 12%, transparent);
    --lotics-scrim: color-mix(in srgb, var(--lotics-shadow-color) 15%, transparent);
    --lotics-scrim-strong: color-mix(in srgb, var(--lotics-shadow-color) 55%, transparent);
    --lotics-scrim-viewer: color-mix(in srgb, var(--lotics-shadow-color) 80%, transparent);
    /* The one meaningful scrim (a failed upload), on the danger family's deep rung for the same reason. */
    --lotics-scrim-danger: color-mix(in srgb, var(--lotics-red-800) 66%, transparent);

    /* Retime from anywhere; the reduced-motion collapse below is `!important` and wins. */
    --lotics-duration-fast: 120ms;
    --lotics-duration-base: 180ms;
    --lotics-duration-slow: 240ms;
    --lotics-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --lotics-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Published: anything outside the kit clearing an overlay reads a rung here. */
    --lotics-z-overlay: 9999;
    --lotics-z-overlay-above: 10000;
    --lotics-z-notification: 10001;
    --lotics-z-skip-link: 10002;
    /* Local to the component's stacking context, never compared with overlays. Row content sits below the
       sticky header's rung, since a static row does not isolate. */
    --lotics-z-row-content: 1;
    --lotics-z-sticky-header: 2;
    --lotics-z-sticky-column: 3;
    --lotics-z-drag: 4;
    /* A band pinned over the page (a record's section strip) rides over every sticky header and column scrolling under it. */
    --lotics-z-pinned: 5;
    /* The top in-page rung; the gap leaves 6–19 for an app's own layers. */
    --lotics-z-floating-bar: 20;

    /* Type, two curves; `line-height` sets even a single line's box height. */
    --lotics-text-xs: 12px;
    --lotics-text-sm: 14px;
    --lotics-text-md: 16px;
    --lotics-text-lg: 18px;
    --lotics-text-xl: 22px;
    --lotics-text-xxl: 28px;
    --lotics-text-xxxl: 32px;

    /* Prose leading, so a typed note and its markdown render share one rhythm. */
    --lotics-leading-xs: 18px;
    --lotics-leading-sm: 24px;
    --lotics-leading-md: 26px;
    --lotics-leading-lg: 28px;
    --lotics-leading-xl: 28px;
    --lotics-leading-xxl: 34px;
    --lotics-leading-xxxl: 38px;

    /* `size + 6` capped at prose leading, for a stacked pair. */
    --lotics-leading-tight-xs: 18px;
    --lotics-leading-tight-sm: 20px;
    --lotics-leading-tight-md: 22px;
    --lotics-leading-tight-lg: 24px;
    --lotics-leading-tight-xl: 28px;
    --lotics-leading-tight-xxl: 34px;
    --lotics-leading-tight-xxxl: 38px;

    /* Inter's dynamic-metrics curve per rung, in em so it scales. */
    --lotics-tracking-xs: 0em;
    --lotics-tracking-sm: -0.006em;
    --lotics-tracking-md: -0.011em;
    --lotics-tracking-lg: -0.014em;
    --lotics-tracking-xl: -0.018em;
    --lotics-tracking-xxl: -0.021em;
    --lotics-tracking-xxxl: -0.022em;
    /* The curve is for lowercase; caps need positive tracking or read shouted. */
    --lotics-tracking-caps: 0.05em;

    /* The body rung per width, which also stops iOS Safari zooming a focused field, and what EVERY value in a
       box is set in — typed or picked: a picker's box re-points its `sm` rung here. The weight is a token so a
       box can move it from outside. */
    --lotics-input-text: var(--lotics-text-md);
    --lotics-input-leading: var(--lotics-leading-md);
    --lotics-input-leading-tight: var(--lotics-leading-tight-md);
    --lotics-input-tracking: var(--lotics-tracking-md);
    --lotics-input-weight: var(--lotics-weight-regular);

    /* What a read value (and a frameless field) is set in: `sm` at both widths, since the input's 16 below
       768 is only Safari's focused-field floor. The weight has no floor, so both read
       `--lotics-input-weight`. */
    --lotics-value-text: var(--lotics-text-sm);
    --lotics-value-leading: var(--lotics-leading-sm);
    --lotics-value-tracking: var(--lotics-tracking-sm);

    --lotics-weight-regular: 400;
    --lotics-weight-medium: 500;
    --lotics-weight-semibold: 600;
    /* `cv11` single-storey `a`, `ss01` alternate `1`, `ss03` alternate `g`. A token because the property
       inherits from nothing the kit owns. */
    --lotics-font-features: "cv11", "ss01", "ss03";
    /* Decided only here; `reset.css` applies it to kit elements and `css_contract` refuses `oldstyle-nums`
       and `proportional-nums`. */
    --lotics-font-numeric: lining-nums tabular-nums;
    /* Swapping a headline face is one value; swapping the body face also needs tracking and a diacritic
       check, hence `--font-sans`. */
    --lotics-font-display: var(--font-sans);
  }

  /* A conditional block repeats its base block's scopes, or loses on the ones it omits. */
  @media (min-width: 768px) {
    :root {
      --lotics-page-pad: var(--lotics-page-pad-wide);
      --lotics-dialog-gutter: var(--lotics-space-24);

      --lotics-text-lg: 20px;
      --lotics-text-xl: 24px;
      --lotics-text-xxl: 32px;
      --lotics-text-xxxl: 48px;

      --lotics-leading-lg: 30px;
      --lotics-leading-xl: 32px;
      --lotics-leading-xxl: 44px;
      --lotics-leading-xxxl: 52px;

      --lotics-leading-tight-lg: 26px;
      --lotics-leading-tight-xl: 30px;
      --lotics-leading-tight-xxl: 38px;
      --lotics-leading-tight-xxxl: 52px;

      --lotics-input-text: var(--lotics-text-sm);
      --lotics-input-leading: var(--lotics-leading-sm);
      --lotics-input-leading-tight: var(--lotics-leading-tight-sm);
      --lotics-input-tracking: var(--lotics-tracking-sm);
    }
  }

  /* 1ms, never 0: an overlay awaiting `transitionend` would never unmount. Collapsing at the token spares
     components their own reduced-motion rules. The kit's one `!important`, so a later retiming at equal
     specificity cannot defeat it. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --lotics-duration-fast: 1ms !important;
      --lotics-duration-base: 1ms !important;
      --lotics-duration-slow: 1ms !important;
    }
  }
}