/* ══════════════════════════════════════════════════════════════════════════
   Cartesia design system — shared theme layer
   ══════════════════════════════════════════════════════════════════════════
   Every dashboard page links this file. It carries the brand faces, the brand
   scales, the semantic tokens, the dark theme and the theme control, so a
   design-system change is one edit here rather than ten edits across the pages.

   Values are taken from packages/ui/src/styles/{brand,globals}.css in
   cartesia-ai/product. Pages should reach for a semantic token first and drop to
   a brand scale step only when none fits.

   The long tail of --paper / --sage / --clay style names at the bottom is the
   vocabulary the pages were already written in. They are kept as aliases so the
   markup did not have to be rewritten; they all resolve to tokens, which is what
   lets one class on <html> re-theme every page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Brand faces ───────────────────────────────────────────────────────────
   ABC Diatype (sans / UI) and PP Kyoto (display) are the Cartesia faces, served
   from this repo — the .woff2 files were already committed here and unreferenced.
   IBM Plex Mono comes from Google, which is where the design system gets it too.

   Diatype ships Regular / Medium / Bold only. This file asks for 600 in 26 places,
   and CSS weight matching would resolve that to Bold — a visibly heavier UI than
   Inter 600 gave. Declaring Medium as the 500–600 face keeps 600 at Medium and
   leaves 700 on Bold, so no call site has to change. PP Kyoto has a real Semibold,
   so display text at 600 is genuine.                                          */
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-Regular.woff2') format('woff2');font-weight:300 450;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-RegularItalic.woff2') format('woff2');font-weight:300 450;font-style:italic;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-Medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-MediumItalic.woff2') format('woff2');font-weight:500 600;font-style:italic;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Diatype';src:url('/fonts/ABCDiatype-BoldItalic.woff2') format('woff2');font-weight:700 900;font-style:italic;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PP Kyoto';src:url('/fonts/PPKyoto-SemiboldItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}

:root{
  /* ── Cartesia brand scales ────────────────────────────────────────────────
     Verbatim from packages/ui/src/styles/brand.css in cartesia-ai/product. Kept
     whole rather than cherry-picked so a future value can be read off directly. */
  --color-cartesia-neutral-50:#fefefe; --color-cartesia-neutral-100:#f9f9f8;
  --color-cartesia-neutral-200:#f3f2ef; --color-cartesia-neutral-300:#f0efe9;
  --color-cartesia-neutral-400:#e4e3db; --color-cartesia-neutral-500:#c5c2bc;
  --color-cartesia-neutral-600:#a7a6a2; --color-cartesia-neutral-700:#787672;
  --color-cartesia-neutral-800:#525150; --color-cartesia-neutral-900:#1e1c1a;
  --color-cartesia-neutral-950:#111010;
  --color-cartesia-green-50:#f4faef;  --color-cartesia-green-100:#e2f5da;
  --color-cartesia-green-200:#ceecbf; --color-cartesia-green-300:#abd49e;
  --color-cartesia-green-400:#5db368; --color-cartesia-green-500:#309d4b;
  --color-cartesia-green-600:#227a38; --color-cartesia-green-700:#1a6b2e;
  --color-cartesia-green-800:#125c25; --color-cartesia-green-900:#004e23;
  --color-cartesia-green-950:#00311a;
  --color-cartesia-orange-50:#fff6f0;  --color-cartesia-orange-100:#ffe8d6;
  --color-cartesia-orange-200:#ffd4b3; --color-cartesia-orange-300:#ffbb8a;
  --color-cartesia-orange-400:#fda05e; --color-cartesia-orange-500:#fc7a37;
  --color-cartesia-orange-600:#e5601e; --color-cartesia-orange-700:#c24b12;
  --color-cartesia-orange-800:#9a380c; --color-cartesia-orange-900:#6e2608;
  --color-cartesia-orange-950:#3f1403;
  --color-cartesia-blue-50:#eef4f8;  --color-cartesia-blue-100:#d1e2e8;
  --color-cartesia-blue-200:#bad0dc; --color-cartesia-blue-300:#a8c0d2;
  --color-cartesia-blue-400:#a0b8cc; --color-cartesia-blue-500:#99b0c8;
  --color-cartesia-blue-600:#7a92a8; --color-cartesia-blue-700:#5c7488;
  --color-cartesia-blue-800:#415869; --color-cartesia-blue-900:#2a3d4d;
  --color-cartesia-blue-950:#182530;
  /* Named anchors, as brand.css names them. */
  --cartesia-growth:var(--color-cartesia-green-300);
  --cartesia-verdant:var(--color-cartesia-green-500);
  --cartesia-forest:var(--color-cartesia-green-900);

  /* ── Semantic tokens ──────────────────────────────────────────────────────
     Same names and values as globals.css, so this file speaks the design system's
     vocabulary. The design system's own rule is to reach for these first and drop
     to a brand scale only when none fits. */
  --background:#f9f9f8;      --foreground:#39342f;
  --surface:#f5f5f2;         --surface-foreground:#39342f;
  --card:#fdfdfc;            --card-foreground:#39342f;
  --muted:#f1f0ec;           --muted-foreground:#636260;
  --accent:#f3f2ef;          --accent-foreground:#39342f;
  --secondary:#f9f9f8;       --secondary-foreground:#696969;
  --primary:var(--cartesia-forest); --primary-foreground:#fefefe;
  --destructive:#e7000b;     --warning:#bb4d00;
  --border:#dfdcd7;          --input:#dfdcd7;  --ring:#a1a1a1;

  /* Status tints. The design system renders status as tinted background + coloured
     text but names no tint token, so they are mixed from the status colour itself —
     changing --destructive moves its tint with it. */
  --destructive-tint:color-mix(in oklab, var(--destructive) 8%, var(--background));
  --warning-tint:color-mix(in oklab, var(--warning) 10%, var(--background));
  /* Status text, as distinct from the status colour. A status message is a tinted
     panel with coloured words on it, and the tint lifts the background toward the
     text: --destructive on its own tint is 3.8:1 and --warning 4.2:1, both under
     AA. Even at 0% tint --destructive only reaches 4.3:1, so the tint is not the
     problem — the colour is, as text. These are the same hues stepped until they
     clear, and they leave --destructive / --warning untouched for the fills,
     borders and marks those tokens are right for. */
  --destructive-ink:#ca040a;
  --warning-ink:#ad4703;

  /* ── Type ─────────────────────────────────────────────────────────────────
     PP Kyoto display, ABC Diatype UI, IBM Plex Mono for figures and metadata. */
  --serif:'PP Kyoto', Georgia, serif;
  --sans: 'ABC Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Radius ───────────────────────────────────────────────────────────────
     One base drives the scale, at the multipliers the design system publishes. */
  --radius:0.45rem;
  --radius-sm:calc(var(--radius) * 0.6);
  --radius-md:calc(var(--radius) * 0.8);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) * 1.4);
  --radius-2xl:calc(var(--radius) * 1.8);
  --radius-3xl:calc(var(--radius) * 2.2);

  /* ── The names the rest of this file already uses, repointed ───────────────
     Every one of these was a hand-picked hex. They now resolve to design-system
     tokens, so the markup below did not have to change. */
  --paper:      var(--background);
  --panel:      var(--muted);
  --panel-2:    var(--accent);
  --forest:     var(--primary);
  --forest-ink: var(--color-cartesia-green-950);
  /* green-600, not verdant (green-500). Verdant is correct as a mark — it is in the
     validated chart ramp — but as small text it is 3.10:1 on --accent. Marks need
     3:1, words need 4.5, and this token dresses words: positive figures in tables. */
  --sage:       var(--color-cartesia-green-600);
  --sage-pale:  var(--color-cartesia-green-100);
  --sage-mid:   var(--color-cartesia-green-200);
  --clay:       var(--destructive-ink);
  --clay-pale:  var(--destructive-tint);
  --ochre:      var(--warning-ink);
  --ochre-pale: var(--warning-tint);
  --slate:      var(--color-cartesia-blue-700);
  --slate-pale: var(--color-cartesia-blue-50);
  --ink:        var(--foreground);
  --ink-2:      var(--muted-foreground);
  /* Between neutral-700 and -800. The scale's obvious pick for a third-level ink
     is neutral-600, but at 2.18:1 on --accent it is a decorative grey, not text —
     every eyebrow, column header and caption on the page failed WCAG AA on it.
     4.76:1 here, still dimmer than --muted-foreground (5.44:1). */
  --ink-3:      #6c6b69;
  --rule:       var(--border);
  --rule-2:     var(--color-cartesia-neutral-300);
  --mark:       var(--color-cartesia-neutral-500);

  --bg:        var(--background);
  --surface2:  var(--muted);
  --card-hover:var(--accent);
  --card2:     var(--muted);
  --border-hi: var(--mark);
  --text:      var(--foreground);
  --text2:     var(--muted-foreground);
  --text3:     var(--ink-3);
  --bright:    var(--color-cartesia-neutral-900);
  --brand:     var(--cartesia-verdant);
  --brand-dim: var(--primary);
  --brand-glow:color-mix(in oklab, var(--cartesia-verdant) 10%, transparent);
  --brand-ring:color-mix(in oklab, var(--cartesia-verdant) 30%, transparent);
  --amber:     var(--warning);
  --amber-bg:  var(--warning-tint);
  --red:       var(--destructive);
  --red-bg:    var(--destructive-tint);
  --blue:      var(--color-cartesia-blue-700);
  --blue-bg:   var(--color-cartesia-blue-50);
  --purple:    var(--color-cartesia-blue-900);

  /* ── Names the other dashboards use ───────────────────────────────────────
     Same idea as the block above: these were hand-picked hexes on the pages that
     define them, and they now resolve to tokens so those pages theme too. Where
     a name was a near-duplicate of one that already existed (--dim for --ink-2,
     --ink3 for --ink-2) it is aliased rather than given a value of its own. */
  --dim:        var(--ink-2);
  --dim2:       var(--ink-3);
  --ink2:       var(--ink);
  --ink3:       var(--ink-2);
  --ink4:       var(--ink-3);
  --muted2:     var(--ink-3);
  --paper2:     var(--panel);
  --paper3:     var(--rule);
  --accent-bg:  var(--sage-pale);
  --amber-l:    var(--warning-tint);
  --amber-bg:   var(--warning-tint);
  --blue-l:     var(--slate-pale);
  --blue-bg:    var(--slate-pale);
  --green:      var(--primary);
  --green-l:    var(--sage-pale);
  --green-bg:   var(--sage-pale);
  --red-l:      var(--destructive-tint);
  --red-bg:     var(--destructive-tint);
  --cyan:       var(--slate);
  --growth:     var(--cartesia-growth);
  --verdant:    var(--cartesia-verdant);
  --carbon:     var(--color-cartesia-neutral-900);
  --brand-dark: var(--forest-ink);
  --brand-mid:  var(--primary);
  /* Only ever a panel background on the pages that use it, never ink — so it
     follows --card and inverts with the theme instead of staying literally white. */
  --white:      var(--card);
  --fm:         var(--mono);
  /* The pages predate the radius scale and hardcode their own base. Pointed at
     the scale so they pick up the design system's corners. */
  --r:          var(--radius-sm);
  --shadow:    none;
  --shadow-hi: none;
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
   The semantic values are the .dark block from globals.css in cartesia-ai/product,
   resolved to hex. Only tokens change here; no rule below restates a colour, which
   is what makes a whole-page theme swap a token edit rather than a rewrite.

   The legacy names that pointed at a FIXED brand step rather than at a semantic
   token are repointed too — a step chosen to be dark ink on paper does not become
   readable just because the page behind it did. */
html.dark{
  --background:#171715;      --foreground:#cdc8c1;
  --surface:#262421;         --surface-foreground:#a1a1a1;
  --card:#171717;            --card-foreground:#cdc8c1;
  --muted:#1e1c1a;           --muted-foreground:#a1a1a1;
  --accent:#1e1c1a;          --accent-foreground:#cdc8c1;
  --secondary:#1e1c1a;       --secondary-foreground:#cdc8c1;
  --primary:var(--cartesia-growth); --primary-foreground:#0a0a0a;
  --destructive:#ff6467;     --warning:#fe9a00;
  /* Light-on-dark, so these already clear AA on their own tints (5.5:1 and
     7.1:1) and need no separate ink step. */
  --destructive-ink:#ff6467; --warning-ink:#fe9a00;
  --border:rgba(255,255,255,.10);
  --input:rgba(255,255,255,.15);
  --ring:#737373;

  /* Scale-anchored names, re-anchored for a dark ground. */
  --forest-ink: var(--color-cartesia-green-200);
  --sage:       var(--color-cartesia-green-400);
  --sage-pale:  color-mix(in oklab, var(--color-cartesia-green-400) 14%, var(--background));
  --sage-mid:   color-mix(in oklab, var(--color-cartesia-green-400) 26%, var(--background));
  --slate:      var(--color-cartesia-blue-300);
  --slate-pale: color-mix(in oklab, var(--color-cartesia-blue-300) 14%, var(--background));
  /* Between neutral-700 and -600. Neutral-700 is the light-mode choice and only
     reaches 3.96:1 on this ground — every eyebrow, column header and card caption
     on the page failed WCAG AA. This clears it at 5.14:1 while staying dimmer than
     --muted-foreground (6.95:1), so the three-step ink hierarchy survives. */
  --ink-3:      #8b8985;
  --rule-2:     rgba(255,255,255,.06);
  --mark:       var(--color-cartesia-neutral-700);
  --bright:     var(--color-cartesia-neutral-100);
  --brand:      var(--color-cartesia-green-400);
  --blue:       var(--color-cartesia-blue-300);
  --blue-bg:    color-mix(in oklab, var(--color-cartesia-blue-300) 14%, var(--background));
  --purple:     var(--color-cartesia-blue-200);
}

/* ── Page type scale ────────────────────────────────────────────────────────
   The pages each declare their own .page-title / .page-sub / .eyebrow, and they had
   drifted: h1 ranged from 30px on recruiter to 42px on employee, with the sub and the
   eyebrow moving with it. Six of the ten agreed on the values below, so those are the
   house scale and the outliers were brought to them.

   Declared here as tokens rather than as rules, because each page's own rule carries its
   own margins and would win the cascade anyway — this is the reference a page should
   reach for, and the place to change it once rather than in ten files. */
:root{
  --page-title-size:32px;
  --page-title-size-sm:26px;   /* under the narrow breakpoint */
  --page-sub-size:14px;
  --eyebrow-size:10.5px;
}

/* ── Figures ────────────────────────────────────────────────────────────────
   ABC Diatype's tabular figures also widen the space and every punctuation mark
   to the digit advance — 0.60em against a normal space's 0.234em. The pages set
   font-variant-numeric:tabular-nums on <body>, which was harmless under Inter
   (there it touches digits only) and became a page-wide spacing defect when the
   brand face came in: "Software Engineer, Agents" rendered with double-width
   gaps after every word and comma.

   So it is opt-in, on the elements that actually hold figures, which is what the
   design system does too — feature settings are normal by default there and
   tabular is applied per component. Columns still line up; prose does not pay
   for it. Add a class here rather than reaching for <body>. */
.mono, .num, .tabular,
.stat-num, .stat-n, .stat-box-val, .sbox-val, .pnum, .bk-n, .lt-num, .m-val,
.rc-stat-val, .pbar-num, .cat-n, .bar-n, .alert-n, .chip-n, .grp-n, .rc-n,
.t-n, .tag-n, .key-val, .role-n{font-variant-numeric:tabular-nums}

/* The three-way control the design system ships: Light · Dark · System. */
.theme-tog{display:flex;align-items:center;gap:2px;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:2px;margin-right:10px}
.theme-tog button{display:flex;align-items:center;justify-content:center;width:26px;height:22px;
  border:0;background:none;color:var(--muted-foreground);border-radius:var(--radius-sm);
  cursor:pointer;transition:background .12s,color .12s}
.theme-tog button:hover{color:var(--foreground)}
.theme-tog button[aria-pressed="true"]{
  /* Mixed from --foreground rather than reading --accent or --muted: several
     pages alias those names to their own meanings, and the control has to look
     the same on all of them. */
  background:color-mix(in oklab, var(--foreground) 12%, transparent);
  color:var(--foreground)}
.theme-tog svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}