/* ────────────────────────────────────────────────────────────────────────────
   SEMANTIC THEME LAYER
   ────────────────────────────────────────────────────────────────────────────
   Maps the raw primitives from tokens.css onto role-based names, then exposes
   those roles to Tailwind through `@theme inline` so they become utilities
   (`bg-background`, `text-muted-foreground`, `rounded-lg`, …).

   This file is HAND-OWNED and stable. `figma-sync` regenerates tokens.css
   underneath it; the mapping below is what survives a re-sync. If a Figma
   variable has no counterpart here, add the mapping once and every component
   picks it up.

   Rule for component authors: only ever use the names defined in this file.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces — CBAR's bg/default is pure white, not a tinted grey. */
  --background: var(--ui-color-neutral-0);
  --foreground: var(--ui-color-neutral-800); /* CBAR text/default #222222 */
  /* CBAR tints its cards one step off the page rather than relying on a shadow
     to lift them. Surfaces it draws flat white — an accordion section, a
     dialog — use `background` instead; the two used to be the same value, and
     splitting them is what lets a card read without elevation. */
  --card: var(--ui-color-neutral-50);
  --card-foreground: var(--ui-color-neutral-800);
  --popover: var(--ui-color-neutral-0);
  --popover-foreground: var(--ui-color-neutral-800);

  /* A tooltip inverts against the page rather than sitting on a surface, so it
     gets its own pair instead of borrowing `foreground`/`background`: CBAR
     draws it one step lighter than body text (#333333, not #222222), and dark
     mode has to flip it or a dark chip lands on a dark page. */
  --tooltip: var(--ui-color-neutral-700);
  --tooltip-foreground: var(--ui-color-neutral-0);

  /* Actions. CBAR's text/primary and icons/primary are both #004976, the
     brand navy, which is ramp step 500 — not 600 as the kit previously used. */
  --primary: var(--ui-color-brand-500);
  --primary-foreground: var(--ui-color-neutral-0); /* CBAR text/inverse */
  --secondary: var(--ui-color-neutral-100);
  --secondary-foreground: var(--ui-color-neutral-800);
  --accent: var(--ui-color-brand-50);
  --accent-foreground: var(--ui-color-brand-600);

  /* Quiet content */
  --muted: var(--ui-color-neutral-100);
  --muted-foreground: var(--ui-color-neutral-500); /* CBAR text/tertiary */
  --disabled-foreground: var(--ui-color-neutral-300); /* CBAR text/disabled */

  /* Status */
  --destructive: var(--ui-color-danger-500);
  --destructive-foreground: var(--ui-color-neutral-0);
  /* Both of these fills are light enough that white text on them falls under
     3:1, so their foreground is dark — same reasoning as the green and
     turquoise palettes below. */
  --success: var(--ui-color-success-500);
  --success-foreground: var(--ui-color-neutral-900);
  --warning: var(--ui-color-warning-500);
  --warning-foreground: var(--ui-color-neutral-900);

  /* Lines and focus. CBAR's border/subtle/default is #E5E5E5 — exactly
     neutral-200 — and the focused state is drawn in the brand navy. */
  --border: var(--ui-color-neutral-200);
  --input: var(--ui-color-neutral-200);
  --ring: var(--ui-color-brand-500);

  /* Modal scrim. Deliberately identical in both themes: a scrim's job is to
     darken whatever is behind it, so inverting it in dark mode would make the
     dialog harder to pick out, not easier. */
  --overlay: oklch(0 0 0 / 0.5);

  /* Charts */
  --chart-1: var(--ui-color-chart-1);
  --chart-2: var(--ui-color-chart-2);
  --chart-3: var(--ui-color-chart-3);
  --chart-4: var(--ui-color-chart-4);
  --chart-5: var(--ui-color-chart-5);

  /* Sidebar / app shell — kept separate so a product can tint its navigation
     without disturbing the content surfaces. */
  --sidebar: var(--ui-color-neutral-100);
  --sidebar-foreground: var(--ui-color-neutral-900);
  --sidebar-primary: var(--ui-color-brand-600);
  --sidebar-primary-foreground: var(--ui-color-neutral-50);
  --sidebar-accent: var(--ui-color-neutral-200);
  --sidebar-accent-foreground: var(--ui-color-neutral-900);
  --sidebar-border: var(--ui-color-neutral-200);
  --sidebar-ring: var(--ui-color-brand-500);
}

/* ────────────────────────────────────────────────────────────────────────────
   COLOUR PALETTES
   ────────────────────────────────────────────────────────────────────────────
   CBAR treats "which colour" and "how filled in" as two independent axes: a
   Button is (variant=solid|outline|ghost|subtle|surface) × (colorPalette=
   primary|secondary|tertiary|black|red|green|yellow). Expressing that as cva
   compound variants would need 5×7 = 35 entries per component.

   Instead each palette below sets a fixed set of role variables, and a variant
   reads them without caring which palette is active:

     colorPalette: { red: 'palette-red' }        ← sets --ctl-* for that palette
     variant:      { solid: 'bg-(--ctl-solid) text-(--ctl-solid-fg)' }

   So a component needs 7 + 5 entries, not 35, and a new palette costs one
   class here rather than an edit in every component.

   The seven roles, and what CBAR uses them for:
     --ctl-solid         filled background        (variant=solid)
     --ctl-solid-fg      text/icon on that fill
     --ctl-solid-hover   that fill, one step down
     --ctl-subtle        tinted background        (variant=subtle / surface)
     --ctl-subtle-hover  that tint, one step up
     --ctl-fg            the colour as ink        (ghost / outline / subtle text)
     --ctl-icon          the colour as a glyph    (a status icon on its own tint)
     --ctl-border        outline                  (variant=outline / surface)

   NOTE on --ctl-icon: it exists because CBAR paints a status *glyph* brighter
   than it sets status *text*. Its Toast draws one icon on every state and
   distinguishes them by this colour alone — `green-600`, `red-600`,
   `yellow-ink`, `secondary-500`, `neutral-800`, read off the icon vectors
   through the bridge. Those are one to two ramp steps lighter than --ctl-fg on
   three of the five, so the two roles cannot be the same variable.

   It is a deliberately lower-contrast role and must not be used for text.
   Measured against its own --ctl-subtle: green 3.00:1, red 3.65:1 and
   secondary 1.74:1, where a turquoise glyph sits on a turquoise tint. --ctl-fg
   reads 6.18 / 6.86 / 8.34 in the same places and is what every label uses.
   Matching the design file was chosen over the contrast here; the trade is
   recorded in README §9 and in finding 8 on the showcase's parity page.

   Dark mode has no counterpart in the design file — CBAR draws these light
   only — so there --ctl-icon simply follows --ctl-fg, which is legible on the
   dark tints the light steps would disappear into.

   The hover rule generalises across every palette: solid darkens one ramp step,
   the tinted variants deepen one step, and the two transparent variants
   (ghost, outline) pick up the subtle tint. That is read straight off CBAR's
   state=hover variants, not invented.

   NOTE on primary/secondary: CBAR's Button component labels these two the other
   way round (its colorPalette=primary paints teal). Its Colors page, its
   semantic layer and its IconButton all say primary is the navy — three sources
   against one — so the Button's labels are treated as a slip in the file and
   primary is navy here.

   NOTE on --ctl-soft: it is the tint for hovering something that is *not*
   filled yet — an unselected tab, an unselected pagination page. CBAR needs it
   because it draws hover and selected identically, so hovering an unselected
   tab makes it look selected; one ramp step below `subtle` separates them
   without leaving the ramp. In dark mode no palette has a step below its
   `subtle` (900), so it is softened toward the surface instead — opaque, so it
   never picks up whatever sits behind it.
   ──────────────────────────────────────────────────────────────────────────── */

.palette-primary {
  --ctl-solid: var(--ui-color-brand-500);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-brand-600);
  --ctl-subtle: var(--ui-color-brand-100);
  --ctl-soft: var(--ui-color-brand-50);
  --ctl-subtle-hover: var(--ui-color-brand-200);
  --ctl-fg: var(--ui-color-brand-500);
  /* CBAR draws no status glyph on this palette; the 500 step is the pattern the
     two it does draw (secondary, neutral) follow. */
  --ctl-icon: var(--ui-color-brand-500);
  --ctl-border: var(--ui-color-brand-300);
}

/* Turquoise. CBAR's own row for this palette is the one whose labels slipped
   (teal fills paired with navy ink), so the tinted ink here follows the pattern
   every other palette uses — its own ramp — rather than that row's navy.

   The solid foreground is WHITE because that is what CBAR draws, and matching
   the design system was chosen over the contrast number: white on this fill
   measures 2.07:1, under the 3:1 WCAG asks for a control. The kit used to darken
   the ink to neutral-900 (8.6:1) instead; that deviation was removed
   deliberately — see README §9 and docs/FigmaParity.mdx. Only --ctl-solid-fg
   moved. --ctl-fg below is still the deep ramp step, so every tinted treatment
   (subtle, surface, outline, ghost) stays above 4.5:1.

   No .dark override for this role, on purpose: the dark blocks further down
   leave --ctl-solid on the 500 step, so the fill is the same colour in both
   modes and the same white belongs on it. */
.palette-secondary {
  --ctl-solid: var(--ui-color-secondary-500);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-secondary-600);
  --ctl-subtle: var(--ui-color-secondary-100);
  --ctl-soft: var(--ui-color-secondary-50);
  --ctl-subtle-hover: var(--ui-color-secondary-200);
  /* One step darker than the ramp position the other palettes use: turquoise
     is light enough that 700 on its own tint is only 3.8:1, and 800 is 8.4:1. */
  --ctl-fg: var(--ui-color-secondary-800);
  /* The glyph stays on the 500 step, which is what CBAR's Toast paints its
     `info` icon with. On its own tint that is 1.74:1 — the lowest pairing in
     the kit, and a deliberate one. Never use this role for text. */
  --ctl-icon: var(--ui-color-secondary-500);
  --ctl-border: var(--ui-color-secondary-200);
}

/* `.palette-third` is the DEPRECATED spelling, kept only so markup written
   against an older build of the kit keeps rendering. `colorPalette="tertiary"`
   is the one to use; the alias goes in the next major. */
.palette-tertiary,
.palette-third {
  --ctl-solid: var(--ui-color-tertiary-500);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-tertiary-700);
  --ctl-subtle: var(--ui-color-tertiary-100);
  --ctl-soft: var(--ui-color-tertiary-50);
  --ctl-subtle-hover: var(--ui-color-tertiary-200);
  --ctl-fg: var(--ui-color-tertiary-800);
  /* No status glyph on this palette either — same reasoning as primary. */
  --ctl-icon: var(--ui-color-tertiary-500);
  --ctl-border: var(--ui-color-tertiary-400);
}

/* CBAR's "black" tops out at neutral-700 for the fill and neutral-800 for ink —
   it never goes to true black for a control. */
.palette-black {
  --ctl-solid: var(--ui-color-neutral-700);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-neutral-800);
  --ctl-subtle: var(--ui-color-neutral-200);
  --ctl-soft: var(--ui-color-neutral-50);
  --ctl-subtle-hover: var(--ui-color-neutral-300);
  --ctl-fg: var(--ui-color-neutral-800);
  /* Same step as the ink — CBAR's `neutral` toast glyph is neutral-800 too, so
     this palette is one of the two where the two roles agree. */
  --ctl-icon: var(--ui-color-neutral-800);
  --ctl-border: var(--ui-color-neutral-400);
}

/* The ink is a step darker than CBAR's red-500: on the tinted background that
   pairing measures 3.08:1, and red-700 lifts it to 6.9:1. */
.palette-red {
  --ctl-solid: var(--ui-color-red-500);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-red-600);
  --ctl-subtle: var(--ui-color-red-100);
  --ctl-soft: var(--ui-color-red-50);
  --ctl-subtle-hover: var(--ui-color-red-200);
  --ctl-fg: var(--ui-color-red-700);
  /* CBAR's `error` glyph is red-600 — 3.65:1 on the tint, where the ink above
     is 6.86:1. The glyph keeps the design file's step. */
  --ctl-icon: var(--ui-color-red-600);
  --ctl-border: var(--ui-color-red-600);
}

/* The same call as the turquoise, for the same reason: CBAR draws white on
   green-500 and the kit now does too, at 2.28:1. The ink on the tint keeps its
   own adjustment — green-600 there is 3.0:1, so --ctl-fg is a step darker. */
.palette-green {
  --ctl-solid: var(--ui-color-green-500);
  --ctl-solid-fg: var(--ui-color-neutral-0);
  --ctl-solid-hover: var(--ui-color-green-600);
  --ctl-subtle: var(--ui-color-green-100);
  --ctl-soft: var(--ui-color-green-50);
  --ctl-subtle-hover: var(--ui-color-green-200);
  --ctl-fg: var(--ui-color-green-700);
  /* The glyph keeps green-600 — the very step the comment above says is 3.0:1
     and the reason --ctl-fg went darker. An icon is not text, and matching
     CBAR was chosen here. */
  --ctl-icon: var(--ui-color-green-600);
  --ctl-border: var(--ui-color-green-500);
}

/* Yellow is the one palette CBAR does not build from its own ramp: the filled
   background is a desaturated amber and the ink a brown, both one-off values in
   its semantic layer. Its solid foreground is dark, since nothing this light
   carries white text. */
.palette-yellow {
  --ctl-solid: var(--ui-color-yellow-surface);
  --ctl-solid-fg: var(--ui-color-yellow-ink);
  --ctl-solid-hover: var(--ui-color-yellow-400);
  --ctl-subtle: var(--ui-color-yellow-100);
  --ctl-soft: var(--ui-color-yellow-50);
  --ctl-subtle-hover: var(--ui-color-yellow-200);
  --ctl-fg: var(--ui-color-yellow-ink);
  /* The other palette where glyph and ink agree: CBAR's `warning` icon is the
     same brown it sets the label in. */
  --ctl-icon: var(--ui-color-yellow-ink);
  --ctl-border: var(--ui-color-yellow-surface);
}

/* CBAR's file has no dark mode, so everything below is the kit's own. The rule
   is the same for each palette: the tinted backgrounds are near-white by
   construction and have to swap to the deep end of their ramp, while the ink
   lifts to a light step so it still reads against them. */

.dark .palette-black {
  --ctl-solid: var(--ui-color-neutral-100);
  --ctl-solid-fg: var(--ui-color-neutral-900);
  --ctl-solid-hover: var(--ui-color-neutral-200);
  --ctl-subtle: var(--ui-color-neutral-800);
  --ctl-soft: color-mix(in oklch, var(--ui-color-neutral-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-neutral-700);
  --ctl-fg: var(--ui-color-neutral-100);
  --ctl-icon: var(--ui-color-neutral-100);
  --ctl-border: var(--ui-color-neutral-700);
}

.dark .palette-primary {
  --ctl-solid: var(--ui-color-brand-400);
  --ctl-solid-fg: var(--ui-color-neutral-950);
  --ctl-solid-hover: var(--ui-color-brand-300);
  --ctl-subtle: var(--ui-color-brand-950);
  --ctl-soft: color-mix(in oklch, var(--ui-color-brand-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-brand-900);
  --ctl-fg: var(--ui-color-brand-300);
  --ctl-icon: var(--ui-color-brand-300);
  --ctl-border: var(--ui-color-brand-700);
}

.dark .palette-secondary {
  --ctl-solid-hover: var(--ui-color-secondary-400);
  --ctl-subtle: var(--ui-color-secondary-900);
  --ctl-soft: color-mix(in oklch, var(--ui-color-secondary-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-secondary-800);
  --ctl-fg: var(--ui-color-secondary-300);
  --ctl-icon: var(--ui-color-secondary-300);
  --ctl-border: var(--ui-color-secondary-700);
}

.dark .palette-tertiary,
.dark .palette-third {
  --ctl-solid-hover: var(--ui-color-tertiary-400);
  --ctl-subtle: var(--ui-color-tertiary-900);
  --ctl-soft: color-mix(in oklch, var(--ui-color-tertiary-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-tertiary-800);
  --ctl-fg: var(--ui-color-tertiary-300);
  --ctl-icon: var(--ui-color-tertiary-300);
  --ctl-border: var(--ui-color-tertiary-700);
}

.dark .palette-red {
  --ctl-solid-hover: var(--ui-color-red-400);
  --ctl-subtle: var(--ui-color-red-900);
  --ctl-soft: color-mix(in oklch, var(--ui-color-red-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-red-800);
  --ctl-fg: var(--ui-color-red-300);
  --ctl-icon: var(--ui-color-red-300);
  --ctl-border: var(--ui-color-red-700);
}

.dark .palette-green {
  --ctl-solid-hover: var(--ui-color-green-400);
  --ctl-subtle: var(--ui-color-green-900);
  --ctl-soft: color-mix(in oklch, var(--ui-color-green-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-green-800);
  --ctl-fg: var(--ui-color-green-300);
  --ctl-icon: var(--ui-color-green-300);
  --ctl-border: var(--ui-color-green-700);
}

.dark .palette-yellow {
  --ctl-solid-hover: var(--ui-color-yellow-300);
  --ctl-subtle: var(--ui-color-yellow-900);
  --ctl-soft: color-mix(in oklch, var(--ui-color-yellow-900) 55%, var(--background));
  --ctl-subtle-hover: var(--ui-color-yellow-800);
  --ctl-fg: var(--ui-color-yellow-300);
  --ctl-icon: var(--ui-color-yellow-300);
  --ctl-border: var(--ui-color-yellow-700);
}

.dark {
  /* Dark mode is not an inversion — surfaces lift toward the light end while
     text stops short of pure white, which keeps large dark areas from
     vibrating against the type. */
  --background: var(--ui-color-neutral-950);
  --foreground: var(--ui-color-neutral-100);
  --card: var(--ui-color-neutral-900);
  --card-foreground: var(--ui-color-neutral-100);
  --popover: var(--ui-color-neutral-900);
  --popover-foreground: var(--ui-color-neutral-100);

  --tooltip: var(--ui-color-neutral-200);
  --tooltip-foreground: var(--ui-color-neutral-900);

  --primary: var(--ui-color-brand-400);
  --primary-foreground: var(--ui-color-neutral-950);
  --secondary: var(--ui-color-neutral-800);
  --secondary-foreground: var(--ui-color-neutral-100);
  --accent: var(--ui-color-brand-950);
  --accent-foreground: var(--ui-color-brand-200);

  --muted: var(--ui-color-neutral-800);
  --muted-foreground: var(--ui-color-neutral-400);
  --disabled-foreground: var(--ui-color-neutral-600);

  --destructive: var(--ui-color-danger-500);
  --destructive-foreground: var(--ui-color-neutral-50);
  --success: var(--ui-color-success-500);
  --success-foreground: var(--ui-color-neutral-950);
  --warning: var(--ui-color-warning-500);
  --warning-foreground: var(--ui-color-neutral-950);

  /* Borders in dark mode are translucent white rather than a fixed grey, so
     they stay visible on top of any surface tint. */
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 16%);
  --ring: var(--ui-color-brand-400);

  --sidebar: var(--ui-color-neutral-900);
  --sidebar-foreground: var(--ui-color-neutral-100);
  --sidebar-primary: var(--ui-color-brand-400);
  --sidebar-primary-foreground: var(--ui-color-neutral-950);
  --sidebar-accent: var(--ui-color-neutral-800);
  --sidebar-accent-foreground: var(--ui-color-neutral-100);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: var(--ui-color-brand-400);
}

/* Expose the semantic layer to Tailwind. `inline` means the utilities resolve
   to `var(--background)` rather than a frozen value, so switching .dark or
   overriding a variable at runtime re-themes without a rebuild. */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-tooltip: var(--tooltip);
  --color-tooltip-foreground: var(--tooltip-foreground);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-disabled-foreground: var(--disabled-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-overlay: var(--overlay);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* CBAR's full corner ladder. The kit previously exposed only sm–xl derived
     from one base; CBAR defines each rung independently and uses the small end
     heavily (buttons and inputs are 4px, avatars 8px), so xs and 2xs matter. */
  --radius-2xs: var(--ui-radius-2xs);
  --radius-xs: var(--ui-radius-xs);
  --radius-sm: var(--ui-radius-sm);
  --radius-md: var(--ui-radius-md);
  --radius-lg: var(--ui-radius-lg);
  --radius-xl: var(--ui-radius-xl);
  --radius-2xl: var(--ui-radius-2xl);
  --radius-3xl: var(--ui-radius-3xl);
  --radius-4xl: var(--ui-radius-4xl);

  --spacing: var(--ui-space-base);

  --font-sans: var(--ui-font-sans);
  --font-mono: var(--ui-font-mono);

  --shadow-xs: var(--ui-shadow-xs);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow-md);
  --shadow-lg: var(--ui-shadow-lg);
  --shadow-xl: var(--ui-shadow-xl);
}