/* ────────────────────────────────────────────────────────────────────────────
   kit-tokens.css: every design value used by the component kit (css/kit.css,
   js/kit/). Phase 3b, Decision C + D (B-flat). This file is the seed of
   brand/tokens.css: a rebrand edits values HERE only, never a component file.

   Rules
   - Existing names from css/style.css :root are kept (same value, same name):
     --color-*, --font, --font-heading, --max-width, --nav-height, --radius,
     --ease, --glass-*. New tokens alias them
     wherever a value already exists, so migration is a mechanical swap.
   - Theme: same 3-way mechanism as style.css. Light is the default; dark
     applies when the system prefers dark and the user has not pinned light
     (:root:not([data-theme="light"]) inside the media query), or when the
     user pinned dark (:root[data-theme="dark"]). js/theme.js sets the attr.
     The two dark blocks are identical on purpose (CSS cannot share them).
   - B-flat: no box-shadow in the kit, sharp corners (radius tokens = 0),
     bold borders, focus = 2px accent outline, popups = 3px border on a
     ~62% dim, alerts = tinted background + thin full border (no side
     bar), status pills are rectangles.
   - Status colours = Decision A (docs/DESIGN_CENTRALIZATION_PLAN.md).
     Components read --status-<key>-bg/-fg; those alias the 8 tone families.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour: surfaces + text (names and values from style.css) ───────── */
  --color-bg: #ffffff;
  --color-bg-light: #f8fafc;
  --color-bg-tinted: #fff5f5;
  --color-dark: #0f172a;
  --color-accent: #ff1616;
  --color-accent-dark: #cc0000;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;

  /* Semantic surfaces (style.css names, unchanged) */
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-success-border: #86efac;
  --color-error-bg: #fee2e2;
  --color-error-text: #b91c1c;
  --color-error-border: #fca5a5;
  --color-warn-bg: #fef3c7;
  --color-warn-text: #92400e;
  --color-warn-border: #fcd34d;
  --color-notif-unread-bg: #fff8db;
  --logo-filter: none;            /* dark themes turn the logo white */
  --color-info-bg: #dbeafe;
  --color-info-text: #1d4ed8;
  --color-info-border: #93c5fd;
  --color-purple-bg: #ede9fe;
  --color-purple-text: #5b21b6;
  --color-purple-border: #c4b5fd;

  /* New colour tokens (kit) */
  --color-accent-deep: #a30000;          /* primary :active */
  --color-accent-soft: rgba(255, 22, 22, 0.06); /* hover tint */
  --color-on-accent: #ffffff;
  --color-text-subtle: #94a3b8;          /* placeholder, disabled, upcoming */
  --color-line-bold: var(--color-text);  /* the B-flat "bold border" */
  --color-hover-bg: var(--color-bg-light);
  --color-danger: #dc2626;               /* Decision A red, confirm OK */
  --color-danger-dark: #b91c1c;
  --color-on-danger: #ffffff;
  /* Button fills (Decision E): deeper red so white text is AA; bright
     --color-accent stays the brand accent for borders, focus, text accents. */
  --btn-primary-bg: var(--color-accent-dark);
  --btn-primary-bg-hover: var(--color-accent-deep);
  --btn-primary-bg-active: #7a0000;
  --btn-danger-bg: var(--color-accent-dark);
  --btn-danger-bg-hover: var(--color-accent-deep);
  --btn-danger-bg-active: #7a0000;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;
  --color-on-whatsapp: #0f172a;
  --color-telegram: #2aabee;             /* Telegram brand blue; dark text is AA */
  --color-telegram-dark: #229ed9;
  --color-on-telegram: #0f172a;
  --color-scrim: rgba(0, 0, 0, 0.62);    /* popup backdrop (B-flat ~62%) */
  --color-skeleton: #eef2f6;
  --color-skeleton-shine: #f8fafc;
  --color-inverse-bg: var(--color-dark); /* tooltip, toast, cookie bar */
  --color-inverse-text: var(--color-bg);
  /* Site footer: a dark panel under a red bar in BOTH themes (pre-kit look). */
  --footer-bg: var(--palette-night);
  --footer-text: var(--palette-slate-50);
  --footer-text-muted: var(--palette-slate-50-a75);
  --footer-text-subtle: var(--palette-slate-50-a70);
  --footer-line: var(--palette-white-a12);
  --footer-bar: var(--color-accent);
  --footer-logo-filter: brightness(0) invert(1);
  --footer-max-w: 1320px;                          /* footer content width (pre-kit) */
  --footer-gutter: clamp(1.25rem, 2.5vw, 3rem);    /* footer side padding (pre-kit) */
  --footer-tagline-size: clamp(1.15rem, 1.8vw, 1.6rem); /* footer tagline (pre-kit) */

  /* ── Tone families (Decision A). bg / fg / border ─────────────────────── */
  --tone-neutral-bg: #f1f5f9;  --tone-neutral-fg: #475569;  --tone-neutral-border: #cbd5e1;
  --tone-yellow-bg: #fef9c3;   --tone-yellow-fg: #854d0e;   --tone-yellow-border: #fde047;
  --tone-blue-bg: #dbeafe;     --tone-blue-fg: #1d4ed8;     --tone-blue-border: #93c5fd;
  --tone-purple-bg: #ede9fe;   --tone-purple-fg: #6d28d9;   --tone-purple-border: #c4b5fd;
  --tone-sky-bg: #e0f2fe;      --tone-sky-fg: #0369a1;      --tone-sky-border: #7dd3fc;
  --tone-green-bg: #dcfce7;    --tone-green-fg: #15803d;    --tone-green-border: #86efac;
  --tone-red-bg: #fee2e2;      --tone-red-fg: #b91c1c;      --tone-red-border: #fca5a5;
  --tone-amber-bg: #fef3c7;    --tone-amber-fg: #b45309;    --tone-amber-border: #fcd34d;

  /* ── Effects (style.css names kept; no shadows anywhere, Decision D) ───── */

  color-scheme: light;
}

/* ── Status keys → tone families (theme-independent aliases) ─────────────── */
:root {
  /* Applications (Decision A) */
  --status-pending-bg: var(--tone-neutral-bg);              --status-pending-fg: var(--tone-neutral-fg);
  --status-withdrawn-bg: var(--tone-neutral-bg);            --status-withdrawn-fg: var(--tone-neutral-fg);
  --status-reviewed-bg: var(--tone-yellow-bg);              --status-reviewed-fg: var(--tone-yellow-fg);
  --status-shortlisted-bg: var(--tone-blue-bg);             --status-shortlisted-fg: var(--tone-blue-fg);
  --status-employer_shortlisted-bg: var(--tone-blue-bg);    --status-employer_shortlisted-fg: var(--tone-blue-fg);
  --status-interview_scheduled-bg: var(--tone-purple-bg);   --status-interview_scheduled-fg: var(--tone-purple-fg);
  --status-interview-bg: var(--tone-purple-bg);             --status-interview-fg: var(--tone-purple-fg);
  --status-employer_interview-bg: var(--tone-purple-bg);    --status-employer_interview-fg: var(--tone-purple-fg);
  --status-profile_sent-bg: var(--tone-sky-bg);             --status-profile_sent-fg: var(--tone-sky-fg);
  --status-hired-bg: var(--tone-green-bg);                  --status-hired-fg: var(--tone-green-fg);
  --status-rejected-bg: var(--tone-red-bg);                 --status-rejected-fg: var(--tone-red-fg);
  --status-rejected_p1-bg: var(--tone-red-bg);              --status-rejected_p1-fg: var(--tone-red-fg);
  --status-rejected_p2-bg: var(--tone-red-bg);              --status-rejected_p2-fg: var(--tone-red-fg);
  --status-rejected_p3-bg: var(--tone-red-bg);              --status-rejected_p3-fg: var(--tone-red-fg);
  --status-employer_rejected-bg: var(--tone-red-bg);        --status-employer_rejected-fg: var(--tone-red-fg);

  /* Interview meetings (Decision A) */
  --status-iv-scheduled-bg: var(--tone-purple-bg);  --status-iv-scheduled-fg: var(--tone-purple-fg);
  --status-iv-completed-bg: var(--tone-green-bg);   --status-iv-completed-fg: var(--tone-green-fg);
  --status-iv-cancelled-bg: var(--tone-red-bg);     --status-iv-cancelled-fg: var(--tone-red-fg);
  --status-iv-other-bg: var(--tone-neutral-bg);     --status-iv-other-fg: var(--tone-neutral-fg);

  /* Candidates (Decision A) */
  --status-cand-pending-bg: var(--tone-amber-bg);   --status-cand-pending-fg: var(--tone-amber-fg);
  --status-cand-active-bg: var(--tone-green-bg);    --status-cand-active-fg: var(--tone-green-fg);
  --status-cand-placed-bg: var(--tone-green-bg);    --status-cand-placed-fg: var(--tone-green-fg);
  --status-cand-inactive-bg: var(--tone-neutral-bg); --status-cand-inactive-fg: var(--tone-neutral-fg);
  --status-cand-rejected-bg: var(--tone-red-bg);    --status-cand-rejected-fg: var(--tone-red-fg);

  /* Job listings + override requests (NOT in Decision A; proposed, see KIT.md) */
  --status-listing-active-bg: var(--tone-green-bg);          --status-listing-active-fg: var(--tone-green-fg);
  --status-listing-draft-bg: var(--tone-neutral-bg);         --status-listing-draft-fg: var(--tone-neutral-fg);
  --status-listing-paused-bg: var(--tone-amber-bg);          --status-listing-paused-fg: var(--tone-amber-fg);
  --status-listing-closed-bg: var(--tone-red-bg);            --status-listing-closed-fg: var(--tone-red-fg);
  --status-listing-pending_review-bg: var(--tone-blue-bg);   --status-listing-pending_review-fg: var(--tone-blue-fg);
  --status-override-pending-bg: var(--tone-amber-bg);        --status-override-pending-fg: var(--tone-amber-fg);
  --status-override-approved-bg: var(--tone-green-bg);       --status-override-approved-fg: var(--tone-green-fg);
  --status-override-denied-bg: var(--tone-red-bg);           --status-override-denied-fg: var(--tone-red-fg);

  /* Progress stepper (unchanged per Decision A: done green, rejected red, upcoming grey) */
  --stepper-done: var(--tone-green-fg);
  --stepper-error: var(--tone-red-fg);
  --stepper-current: var(--color-accent);
  --stepper-upcoming: var(--color-border);
  --stepper-upcoming-text: var(--color-text-subtle);
}

/* ── Type, space, shape, layers, motion (theme-independent) ───────────────── */
:root {
  /* Families (style.css names kept; --font-body/--font-display alias them) */
  --font: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-heading: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-body: var(--font);
  --font-display: var(--font-heading);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type ramp: 9 steps replace 93 CSS + 25 JS distinct font sizes */
  --text-2xs: 0.7rem;    /* pills, step labels, table heads */
  --text-xs: 0.78rem;    /* buttons, labels, eyebrows */
  --text-sm: 0.85rem;    /* secondary text, dense tables */
  --text-base: 0.95rem;  /* body, inputs */
  --text-md: 1.05rem;    /* lead, card titles */
  --text-lg: 1.3rem;     /* h3, modal titles */
  --text-xl: 1.75rem;    /* h2, stat values */
  --text-2xl: clamp(2rem, 4.5vw, 3.4rem);   /* h1 / page header */
  --text-display: clamp(2.2rem, 5vw, 4rem); /* hero */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --lh-none: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.03em;   /* display + h1 */
  --tracking-snug: -0.02em;    /* h2-h4 */
  --tracking-normal: 0;
  --tracking-caps-sm: 0.05em;  /* small uppercase labels (portal field heads) */
  --tracking-label: 0.12em;    /* buttons, tabs */
  --tracking-wide: 0.16em;     /* eyebrows, table heads */
  --measure: 62ch;             /* lead / prose max line length */
  --measure-title: 14ch;       /* hero headline wrap */
  --measure-tagline: 28ch;     /* footer tagline wrap */

  /* Spacing: 8 steps replace 281 distinct padding pairs */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-hair: 0.125rem;      /* pill vertical padding */

  /* Radii. B-flat = sharp: kit roles all resolve to --radius-sharp. */
  --radius: 0;                 /* style.css legacy name; sharp everywhere (Decision D) */
  --radius-sharp: 0;
  --radius-round: 50%;         /* ONLY the unread dot (.dot, .nav__dot, .badge--dot) and radios */
  --radius-control: var(--radius-sharp);  /* buttons, inputs, tabs */
  --radius-surface: var(--radius-sharp);  /* cards, modals, menus, toasts */
  --radius-badge: var(--radius-sharp);    /* pills, chips, badges (rectangles) */

  /* Border widths */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;             /* popups */
  --border-bar: 5px;           /* accent bars: card--accent, selected rows, cookie banner (alerts and toasts have none) */
  --border-footer: 6px;        /* red bar on top of the site footer */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--color-accent);

  /* Component sizes */
  --control-h: 2.75rem;
  --control-h-sm: 2.125rem;
  --control-h-lg: 3.25rem;
  --check-size: 1.125rem;
  --check-mark: 0.5rem;
  --switch-w: 2.5rem;
  --switch-h: 1.375rem;
  --switch-knob: 0.875rem;
  --icon-sm: 0.875rem;
  --icon-md: 1rem;
  --icon-lg: 1.25rem;
  --icon-xl: 1.5rem;
  --icon-stroke: 2;
  --check-rotate: 45deg;
  --spinner-size: 1.5rem;
  --spinner-size-sm: 0.875rem;
  --progress-h: 0.375rem;
  --step-dot: 0.625rem;
  --skeleton-line: 0.75rem;
  --skeleton-block: 5.25rem;
  --menu-w: 13.75rem;
  --tooltip-w: 16rem;
  --toast-w: 20rem;
  --modal-w-sm: 26.25rem;      /* confirm / alert (was 420px) */
  --modal-w-md: 35rem;
  --modal-icon: 2.5rem;        /* icon tile beside a modal title */
  --modal-w-lg: 56rem;
  --drawer-w: 24rem;
  --modal-max-h: 90vh;
  --cal-cell: 2.5rem;
  --otp-cell: 3rem;
  --max-width: 1100px;
  --nav-height: 72px;
  --phone-code-w: calc(6ch + var(--space-3) * 2 + var(--border-1) * 2); /* country-code box: ~6 characters */
  --repeater-col-min: 10rem;   /* narrowest column in a repeater row before it wraps */
  --split-list-w: 280px;       /* list pane beside the detail (from 900px) */
  --split-side-w: 380px;       /* narrow detail pane beside a wide list */
  --split-offset: 180px;       /* viewport height kept free above scrolling panes */
  --nav-logo-h: 38px;          /* logo image height inside the nav (pre-kit size) */
  --footer-logo-h: 44px;       /* logo image height in the site footer */
  --nav-panel-w: 18.75rem;     /* nav dropdown panels (bell list) */
  --nav-panel-max-h: 20rem;    /* scroll limit of a nav panel list */

  /* Layers: order banner < modal < toast < confirm < tour (as today) */
  --z-raised: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-banner: 1000;
  --z-modal: 2000;
  --z-modal-top: 3000;         /* modal that must sit above another */
  --z-toast: 9000;
  --z-confirm: 9500;           /* Kit.confirm / Kit.alert */
  --z-tour: 9999;

  /* Overlay */
  --overlay-bg: var(--color-scrim);

  /* Motion: replaces 27 distinct durations and 76 transition strings */
  --ease: 0.2s ease;           /* style.css legacy (duration + curve) */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-spin: 0.8s;
  --dur-shimmer: 1.4s;
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --press-shift: 1px;          /* :active translateY */
  --enter-shift: 0.5rem;       /* toast / drawer slide distance */

  /* Misc */
  --disabled-opacity: 0.45;
  --muted-opacity: 0.7;
}

/* ── Dark theme: system preference, not pinned light ─────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1220;
    --color-bg-light: #0f172a;
    --color-bg-tinted: #11172a;
    --color-dark: #f1f5f9;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border: #1f2a3d;
    --color-success-bg: rgba(34, 197, 94, 0.13);
    --color-success-text: #4ade80;
    --color-success-border: rgba(34, 197, 94, 0.35);
    --color-error-bg: rgba(220, 38, 38, 0.14);
    --color-error-text: #f87171;
    --color-error-border: rgba(220, 38, 38, 0.35);
    --color-warn-bg: rgba(245, 158, 11, 0.13);
    --color-warn-text: #fcd34d;
    --color-warn-border: rgba(245, 158, 11, 0.35);
    --color-notif-unread-bg: rgba(255, 22, 22, 0.08);
    --logo-filter: brightness(0) invert(1);
    --color-info-bg: rgba(59, 130, 246, 0.13);
    --color-info-text: #60a5fa;
    --color-info-border: rgba(59, 130, 246, 0.35);
    --color-purple-bg: rgba(139, 92, 246, 0.14);
    --color-purple-text: #a78bfa;
    --color-purple-border: rgba(139, 92, 246, 0.35);
    --color-accent-soft: rgba(255, 22, 22, 0.12);
    --color-text-subtle: #64748b;
    --color-scrim: rgba(0, 0, 0, 0.72);
    --color-skeleton: #162033;
    --color-skeleton-shine: #1f2a3d;
    --tone-neutral-bg: #1c2536;              --tone-neutral-fg: #a3b1c6;  --tone-neutral-border: #334155;
    --tone-yellow-bg: rgba(234, 179, 8, 0.15);  --tone-yellow-fg: #fde047;  --tone-yellow-border: rgba(234, 179, 8, 0.4);
    --tone-blue-bg: rgba(59, 130, 246, 0.15);   --tone-blue-fg: #7cb4fb;    --tone-blue-border: rgba(59, 130, 246, 0.4);
    --tone-purple-bg: rgba(139, 92, 246, 0.16); --tone-purple-fg: #b9a3fb;  --tone-purple-border: rgba(139, 92, 246, 0.4);
    --tone-sky-bg: rgba(14, 165, 233, 0.15);    --tone-sky-fg: #5cc8f9;     --tone-sky-border: rgba(14, 165, 233, 0.4);
    --tone-green-bg: rgba(34, 197, 94, 0.14);   --tone-green-fg: #4ade80;   --tone-green-border: rgba(34, 197, 94, 0.4);
    --tone-red-bg: rgba(220, 38, 38, 0.16);     --tone-red-fg: #fb8a8a;     --tone-red-border: rgba(220, 38, 38, 0.45);
    --tone-amber-bg: rgba(245, 158, 11, 0.15);  --tone-amber-fg: #fbbf24;   --tone-amber-border: rgba(245, 158, 11, 0.4);
    color-scheme: dark;
  }
}

/* ── Dark theme: user pinned dark (identical values to the block above) ──── */
:root[data-theme="dark"] {
  --color-bg: #0b1220;
  --color-bg-light: #0f172a;
  --color-bg-tinted: #11172a;
  --color-dark: #f1f5f9;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #1f2a3d;
  --color-success-bg: rgba(34, 197, 94, 0.13);
  --color-success-text: #4ade80;
  --color-success-border: rgba(34, 197, 94, 0.35);
  --color-error-bg: rgba(220, 38, 38, 0.14);
  --color-error-text: #f87171;
  --color-error-border: rgba(220, 38, 38, 0.35);
  --color-warn-bg: rgba(245, 158, 11, 0.13);
  --color-warn-text: #fcd34d;
  --color-warn-border: rgba(245, 158, 11, 0.35);
  --color-notif-unread-bg: rgba(255, 22, 22, 0.08);
  --logo-filter: brightness(0) invert(1);
  --color-info-bg: rgba(59, 130, 246, 0.13);
  --color-info-text: #60a5fa;
  --color-info-border: rgba(59, 130, 246, 0.35);
  --color-purple-bg: rgba(139, 92, 246, 0.14);
  --color-purple-text: #a78bfa;
  --color-purple-border: rgba(139, 92, 246, 0.35);
  --color-accent-soft: rgba(255, 22, 22, 0.12);
  --color-text-subtle: #64748b;
  --color-scrim: rgba(0, 0, 0, 0.72);
  --color-skeleton: #162033;
  --color-skeleton-shine: #1f2a3d;
  --tone-neutral-bg: #1c2536;              --tone-neutral-fg: #a3b1c6;  --tone-neutral-border: #334155;
  --tone-yellow-bg: rgba(234, 179, 8, 0.15);  --tone-yellow-fg: #fde047;  --tone-yellow-border: rgba(234, 179, 8, 0.4);
  --tone-blue-bg: rgba(59, 130, 246, 0.15);   --tone-blue-fg: #7cb4fb;    --tone-blue-border: rgba(59, 130, 246, 0.4);
  --tone-purple-bg: rgba(139, 92, 246, 0.16); --tone-purple-fg: #b9a3fb;  --tone-purple-border: rgba(139, 92, 246, 0.4);
  --tone-sky-bg: rgba(14, 165, 233, 0.15);    --tone-sky-fg: #5cc8f9;     --tone-sky-border: rgba(14, 165, 233, 0.4);
  --tone-green-bg: rgba(34, 197, 94, 0.14);   --tone-green-fg: #4ade80;   --tone-green-border: rgba(34, 197, 94, 0.4);
  --tone-red-bg: rgba(220, 38, 38, 0.16);     --tone-red-fg: #fb8a8a;     --tone-red-border: rgba(220, 38, 38, 0.45);
  --tone-amber-bg: rgba(245, 158, 11, 0.15);  --tone-amber-fg: #fbbf24;   --tone-amber-border: rgba(245, 158, 11, 0.4);
  color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 3 ADDITIONS (token consolidation, 2026-10-03)
   Appended by Phase 3 so css/style.css and the page stylesheets read every
   value from this file. Visually neutral: each token holds exactly the value
   the CSS used to type literally.
   - Editorial palette: the marketing / home / auth / error pages used their
     own --mp-* / --ed-* / --ae-* / --er-* palettes with their own dark
     blocks; those are now one-line aliases of the themed tokens below.
   - Fixed palette (--palette-*): THEME-INVARIANT raw colours. A legacy rule
     that typed e.g. #0f172a keeps #0f172a in dark mode too, so it cannot read
     the themed --color-dark without changing dark mode. Phase 3b (kit
     migration) replaces these with semantic tokens; new code must not use
     --palette-* directly.
   - Near-misses Phase 3 left literal (a merge into a token would have been a
     visible change) were tokenised or snapped by the Phase 3b batches; the
     last ones became the SITE-WIDE ONE-OFFS at the end of this file.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Editorial palette (light). Dark values in the two blocks further down. */
  --color-ink: #0f172a;
  --color-ink-soft: #475569;
  --color-ink-mute: #94a3b8;
  --color-surface-soft: #f8fafc;
  --color-surface-card: #ffffff;
  --color-band-dark: #0b0f17;
  --font-editorial-heading: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Accent tints (--color-accent-aNN = accent at NN% alpha) and the fixed
     palette (--palette-*): theme-invariant raw colours, see header above.
     aNN suffix = alpha in percent (a02_5 = 2.5%). */
  --color-accent-a02_5: rgba(255, 22, 22, 0.025);
  --color-accent-a05: rgba(255, 22, 22, 0.05);
  --color-accent-a06: rgba(255, 22, 22, 0.06);
  --color-accent-a08: rgba(255, 22, 22, 0.08);
  --color-accent-a10: rgba(255, 22, 22, 0.1);
  --color-accent-a18: rgba(255, 22, 22, 0.18);
  --palette-amber-100: #fef3c7;
  --palette-amber-300: #fcd34d;
  --palette-amber-600: #d97706;
  --palette-amber-700: #b45309;
  --palette-emerald-500-a12: rgba(16, 185, 129, 0.12);
  --palette-emerald-600: #059669;
  --palette-green-500-a08: rgba(34, 197, 94, 0.08);
  --palette-green-500-a25: rgba(34, 197, 94, 0.25);
  --palette-green-700: #15803d;
  --palette-night: #0b0f17;
  --palette-red-500-a07: rgba(239, 68, 68, 0.07);
  --palette-red-500-a25: rgba(239, 68, 68, 0.25);
  --palette-sky-500: #0ea5e9;
  --palette-slate-200: #e2e8f0;
  --palette-slate-400: #94a3b8;
  --palette-slate-50: #f8fafc;
  --palette-slate-50-a70: rgba(248, 250, 252, 0.7);
  --palette-slate-50-a75: rgba(248, 250, 252, 0.75);
  --palette-slate-600: #475569;
  --palette-slate-900: #0f172a;
  --palette-slate-900-a55: rgba(15, 23, 42, 0.55);
  --palette-white: #ffffff;
  --palette-white-a08: rgba(255, 255, 255, 0.08);
  --palette-white-a12: rgba(255, 255, 255, 0.12);
  --palette-white-a55: rgba(255, 255, 255, 0.55);
  --palette-white-a60: rgba(255, 255, 255, 0.6);
  --palette-white-a70: rgba(255, 255, 255, 0.7);
  --palette-white-a78: rgba(255, 255, 255, 0.78);
  --palette-white-a90: rgba(255, 255, 255, 0.9);
  --palette-white-a92: rgba(255, 255, 255, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ink: #e6edf6;
    --color-ink-soft: #b6c2d2;
    --color-ink-mute: #7b8aa1;
    --color-surface-soft: #11172a;
    --color-surface-card: #11172a;
    --color-band-dark: #050810;
  }
}
:root[data-theme="dark"] {
  --color-ink: #e6edf6;
  --color-ink-soft: #b6c2d2;
  --color-ink-mute: #7b8aa1;
  --color-surface-soft: #11172a;
  --color-surface-card: #11172a;
  --color-band-dark: #050810;
}

/* ════════════════════════════════════════════════════════════════════════════
   EDITORIAL SURFACES (Phase 3b Batch 2, 2026-10-04)
   Values for css/kit/editorial.css: the public pages (home, marketing, legal,
   auth, error). Each token holds the value the retired page stylesheets
   (marketing-pages / index-editorial / legal-editorial / auth-editorial /
   error-editorial.css) typed literally, so the move is visually neutral;
   font sizes snapped to the ramp are listed in the plan doc.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Display ramp (fluid). Extends --text-2xs ... --text-display above. */
  --text-hero: clamp(2.4rem, 6.2vw, 6.5rem);        /* page masthead headline */
  --text-hero-phone: clamp(3rem, 13vw, 6rem);       /* home masthead below 600px */
  --text-banner: clamp(2.4rem, 7vw, 6rem);          /* home band headlines */
  --text-closer: clamp(2.6rem, 8vw, 7rem);          /* home closing band */
  --text-section: clamp(2.2rem, 5.5vw, 4.5rem);     /* band headline */
  --text-cta: clamp(2.2rem, 6vw, 5rem);             /* dark call-to-action band */
  --text-auth: clamp(2.6rem, 6.5vw, 5.5rem);        /* sign-in / register headline */
  --text-error: clamp(2.4rem, 6.5vw, 5.5rem);       /* 404 / 500 headline */
  --text-error-code: clamp(8rem, 22vw, 22rem);      /* the outlined 404 / 500 */
  --text-path: clamp(2rem, 4vw, 3.6rem);            /* home path panels */
  --text-figure: clamp(2rem, 3.5vw, 3rem);          /* editorial stat value */
  --text-step-num: clamp(2.25rem, 3vw, 3rem);       /* process step number */
  --text-label-xl: clamp(1.9rem, 3.4vw, 3rem);      /* split-layout label */
  --text-title: clamp(1.6rem, 2.6vw, 2.2rem);       /* legal section, auth card, term figure */
  --text-success: clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  --text-quote: clamp(1.4rem, 2.6vw, 2.2rem);
  --text-intro: clamp(1.35rem, 2vw, 1.85rem);
  --text-step-title: clamp(1.25rem, 1.8vw, 1.65rem);
  --text-card-title: clamp(1.25rem, 1.8vw, 1.5rem);
  --text-value: clamp(1.1rem, 1.5vw, 1.3rem);       /* contact rows */
  --text-lede: clamp(1.05rem, 1.6vw, 1.3rem);       /* masthead lede, split text */
  --text-lede-sm: clamp(1rem, 1.5vw, 1.2rem);       /* auth / error lede */
  --text-cta-body: clamp(1rem, 1.4vw, 1.15rem);     /* CTA band body, FAQ questions */

  --lh-display: 0.96;
  --lh-headline: 0.97;
  --lh-banner: 0.95;
  --lh-closer: 0.92;
  --lh-code: 0.85;
  --lh-step-num: 0.9;
  --lh-label-xl: 1.02;
  --lh-success: 1.05;
  --lh-title: 1.1;
  --lh-quote: 1.25;
  --lh-faq: 1.3;
  --lh-intro: 1.45;
  --lh-relaxed: 1.65;
  --tracking-code: -0.06em;
  --tracking-step-num: -0.04em;
  --tracking-display: -0.025em;
  --tracking-title: -0.015em;
  --tracking-tight-1: -0.01em;
  --tracking-text: 0.02em;
  --tracking-ui: 0.04em;
  --tracking-role: 0.06em;
  --tracking-figure: 0.08em;
  --tracking-caps: 0.1em;
  --tracking-button: 0.14em;
  --tracking-contact: 0.18em;
  --tracking-eyebrow: 0.2em;
  --tracking-legal: 0.22em;
  --weight-semibold: 600;

  /* Measures */
  --measure-hero: 18ch;
  --measure-hero-narrow: 16ch;
  --measure-auth: 12ch;
  --measure-legal-title: 22ch;
  --measure-lede: 56ch;
  --measure-auth-lede: 42ch;
  --measure-cta: 50ch;
  --measure-success: 48ch;
  --measure-band-sub: 38ch;
  --measure-band-sub-narrow: 28ch;
  --measure-prose: 72ch;
  --measure-feature: 70ch;
  --index-max-w: 760px;
  --auth-card-max-w: 520px;

  /* Layout: shell, bands, grids */
  --shell-max: 1320px;
  --shell-gutter: clamp(1.25rem, 2.5vw, 3rem);
  --shell-error-max: 1240px;
  --shell-error-pad: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem);
  --shell-error-gap: clamp(2rem, 5vw, 4rem);
  --masthead-pad-top: clamp(3rem, 8vw, 7rem);
  --masthead-pad-top-home: clamp(3rem, 9vw, 7rem);
  --masthead-pad-top-phone: clamp(2rem, 6vw, 4rem);
  --masthead-pad-bottom: clamp(2rem, 5vw, 4rem);
  --masthead-gap: clamp(1.25rem, 3vw, 2.5rem);
  --masthead-meta-gap: clamp(1rem, 2vw, 2rem);
  --masthead-meta-offset: clamp(1.5rem, 4vw, 3rem);
  --masthead-cta-gap: 1.1rem;
  --masthead-cta-offset: clamp(1.5rem, 3vw, 2.5rem);
  --band-pad: clamp(3.5rem, 8vw, 7rem);
  --band-pad-phone: clamp(2.5rem, 6vw, 4rem);
  --band-pad-compact: clamp(1.75rem, 3vw, 2.5rem);
  --band-pad-lg: clamp(4rem, 9vw, 8rem);
  --band-head-gap: 0.85rem;
  --band-head-offset: clamp(2rem, 5vw, 3.5rem);
  --band-head-offset-lg: clamp(2rem, 5vw, 4rem);
  --cta-pad: clamp(3rem, 7vw, 6rem);
  --grid-gap: clamp(1.25rem, 2.5vw, 2rem);
  --split-gap: clamp(1.5rem, 3vw, 2.5rem);
  --split-gap-wide: clamp(2.5rem, 5vw, 5rem);
  --split-gap-contact: clamp(2rem, 4vw, 4rem);
  --intro-gap: clamp(2rem, 4vw, 4rem);
  --steps-gap: clamp(1.75rem, 4vw, 2.5rem);
  --steps-gap-row: clamp(1.5rem, 2.4vw, 2.25rem);
  --steps-gap-loose: clamp(2rem, 4vw, 3rem);
  --step-gap: 0.55rem;
  --step-pad: 1.1rem;
  --step-num-gap: 0.15rem;
  --figure-label-gap: 0.3rem;
  --quote-offset: clamp(2rem, 4vw, 3rem);
  --quote-pad: clamp(1.5rem, 3vw, 2.5rem);
  --border-quote: 4px;
  --index-col-gap: clamp(1.5rem, 3vw, 3rem);
  --index-item-gap: 0.7rem;
  --index-item-pad: 0.7rem;
  --index-dot: 6px;
  --card-pad-editorial: clamp(1.5rem, 2.5vw, 2.25rem);
  --card-pad-form: clamp(1.5rem, 3vw, 2.5rem);
  --card-pad-auth: clamp(1.75rem, 3vw, 2.5rem);
  --card-pad-success: clamp(1.75rem, 4vw, 3rem);
  --feature-offset: clamp(2rem, 4vw, 3rem);
  --badge-xl: 56px;
  --badge-xl-icon: 30px;
  --btn-arrow-w: 18px;
  --btn-arrow-h: 12px;
  --btn-arrow-xl-w: 28px;
  --btn-arrow-xl-h: 18px;
  --btn-arrow-shift: 4px;
  --btn-arrow-shift-lg: 6px;
  --btn-display-pad: 0.95rem 1.6rem;
  --contact-row-gap: 1.1rem;
  --contact-label-w: 130px;
  --contact-icon: 15px;
  --faq-pad: clamp(1.1rem, 2vw, 1.5rem);
  --faq-answer-pad: clamp(1.25rem, 2.5vw, 1.75rem);
  --faq-marker-w: 1.5rem;
  --faq-focus-offset: 4px;
  --legal-gap: clamp(2rem, 4vw, 3.5rem);
  --legal-toc-w: minmax(220px, 280px);
  --legal-toc-top: 100px;
  --legal-toc-max-h: calc(100vh - 140px);
  --legal-toc-max-h-phone: 12rem;
  --legal-toc-indent: 2.3rem;
  --legal-toc-gap: 0.65rem;
  --legal-section-pad-top: clamp(2.25rem, 3.5vw, 3rem);
  --legal-section-pad-bottom: clamp(2rem, 3vw, 2.75rem);
  --legal-num-gap: 0.4rem;
  --legal-title-gap: 1.2rem;
  --legal-p-gap: 1.1rem;
  --legal-list-gap: 0.55rem;
  --legal-list-indent: 1.25rem;
  --legal-sublist-indent: 1.5rem;
  --legal-dash: 0.55rem;
  --legal-dash-top: 0.7em;
  --legal-toc-num-top: 0.2rem;
  --legal-lh-toc: 1.35;
  --meta-row-gap: 0.85rem;
  --meta-label-w: 8.5rem;
  --tabs-page-gap: clamp(2rem, 4vw, 3rem);
  --auth-pad-top: clamp(2.5rem, 6vw, 5rem);
  --auth-pad-bottom: clamp(3rem, 7vw, 6rem);
  --auth-grid-gap: clamp(2rem, 5vw, 4rem);
  --auth-bullet-gap: 1.1rem;
  --auth-bullet-indent: 1.85rem;
  --auth-bullet-w: 1.1rem;
  --auth-bullet-top: 0.62em;
  --auth-form-gap: 1.1rem;
  --auth-field-gap: 0.4rem;
  --auth-check-gap: 0.85rem;
  --auth-check-pad: 0.95rem 1rem;
  --auth-role-pad: 1rem 0.75rem;
  --auth-helper-gap: 0.45rem;
  --auth-account-gap: 0.6rem;
  --auth-account-pad: 0.6rem 0.85rem;
  --shake-shift: 6px;
  --dur-shake: 360ms;
  --ease-shake: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  --dur-reveal: 700ms;
  --reveal-shift: 28px;
  --dur-path: 500ms;
  --dur-arrow: 240ms;
  --dur-arrow-slow: 300ms;
  --dur-pop: 420ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pop-from: 0.4;
  --success-rise: 14px;
  --code-stroke: 2px;
  --code-stroke-phone: 1.5px;
  --path-pad: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 3rem);
  --path-min-h: clamp(280px, 32vw, 420px);
  --paths-head-pad: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  --closer-gap: clamp(1.5rem, 3vw, 2.25rem);
  --underline-offset: 3px;
  --underline-offset-em: 0.2em;
  --z-behind: -1;
  --textarea-tall-h: 140px;
  --page-min-h: 100vh;
  --page-min-h-dynamic: 100dvh;
  --lh-copy: 1.6;              /* body copy line height (style.css body) */
  --lh-list: 1.5;
  --btn-submit-pad-x: 1.4rem;
  --pop-delay: 80ms;
  --check-offset: 0.18rem;
  --choice-body-gap: 0.2rem;
  --terms-check-offset: 0.9rem;
  --error-stage-gap: clamp(1.25rem, 2.5vw, 2rem);
  --error-stage-pad: clamp(1rem, 3vw, 2rem);

  /* Newsletter signup card + pill (css/kit/signup.css) */
  --signup-w: 380px;
  --signup-logo-h: 28px;
  --signup-offset: var(--space-6);
  --signup-offset-phone: var(--space-3);
  --signup-pad-x: 1.2rem;
  --signup-bar-pad: 0.55rem 1.2rem;
  --signup-head-pad: 1.1rem 1.2rem 0;
  --signup-gap: 0.55rem;
  --signup-rule-w: 28px;
  --signup-min: 28px;
  --signup-x: 22px;
  --signup-foot-pad: 0.9rem 1.2rem 1rem;
  --signup-foot-offset: 0.9rem;
  --signup-pill-pad: 0.65rem 0.6rem 0.65rem 0.95rem;
  --signup-rise: 20px;
  --dur-signup-in: 320ms;
  --ease-signup: cubic-bezier(0.2, 0.8, 0.2, 1);
  --measure-signup: 32ch;
  --text-signup-title: 1.5rem;

  /* Colour roles on the editorial surfaces */
  --on-dark: var(--palette-white);
  --on-dark-title: var(--palette-white);           /* dark: the ink */
  --signup-bg: var(--palette-white);                /* dark: night */
  --signup-line: var(--palette-slate-900);          /* dark: the border */
  --signup-bar-bg: var(--palette-slate-900);        /* dark: the border */
  --signup-strong: var(--color-text);               /* dark: white */
  --signup-soft: var(--color-text-muted);           /* dark: soft ink */
  --signup-fg: var(--color-text);                   /* dark: ink */
  --signup-pill-line: var(--palette-slate-900);     /* dark: white */
  --signup-top: var(--color-accent);                /* dark: the border */
  --signup-x-fg: var(--color-text-muted);           /* dark: white */
  --on-dark-text: var(--palette-slate-50);
  --on-dark-muted: var(--palette-white-a70);
  --on-dark-soft: var(--palette-white-a78);
  --on-dark-faint: var(--palette-white-a55);
  --on-dark-quiet: var(--palette-white-a60);
  --on-dark-strong: var(--palette-white-a92);
  --on-dark-note: var(--palette-white-a90);
  --on-dark-line: var(--palette-white-a08);
  --success-ink: var(--palette-emerald-600);
  --success-wash: var(--palette-emerald-500-a12);
  --feature-inverse-bg: var(--palette-slate-900);   /* dark: the accent */
  --feature-inverse-hover: var(--color-accent);     /* dark: white */
  --choice-on-bg: var(--color-ink);                 /* dark: the accent */
  --choice-on-fg: var(--color-bg);                  /* dark: white */
  --error-page-bg:
    radial-gradient(circle at 12% 8%, var(--color-accent-a08), transparent 50%),
    radial-gradient(circle at 88% 92%, var(--color-accent-a05), transparent 50%),
    var(--color-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --feature-inverse-bg: var(--color-accent);
    --feature-inverse-hover: var(--palette-white);
    --choice-on-bg: var(--color-accent);
    --choice-on-fg: var(--palette-white);
    --on-dark-title: var(--color-ink);
    --signup-bg: var(--palette-night);
    --signup-line: var(--color-border);
    --signup-bar-bg: var(--color-border);
    --signup-strong: var(--palette-white);
    --signup-soft: var(--color-ink-soft);
    --signup-fg: var(--color-ink);
    --signup-pill-line: var(--palette-white);
    --signup-top: var(--color-border);
    --signup-x-fg: var(--palette-white);
    --error-page-bg:
      radial-gradient(circle at 12% 8%, var(--color-accent-a18), transparent 50%),
      radial-gradient(circle at 88% 92%, var(--color-accent-a10), transparent 50%),
      var(--color-bg);
  }
}
:root[data-theme="dark"] {
  --feature-inverse-bg: var(--color-accent);
  --feature-inverse-hover: var(--palette-white);
  --choice-on-bg: var(--color-accent);
  --choice-on-fg: var(--palette-white);
  --on-dark-title: var(--color-ink);
  --signup-bg: var(--palette-night);
  --signup-line: var(--color-border);
  --signup-bar-bg: var(--color-border);
  --signup-strong: var(--palette-white);
  --signup-soft: var(--color-ink-soft);
  --signup-fg: var(--color-ink);
  --signup-pill-line: var(--palette-white);
  --signup-top: var(--color-border);
  --signup-x-fg: var(--palette-white);
  --error-page-bg:
    radial-gradient(circle at 12% 8%, var(--color-accent-a18), transparent 50%),
    radial-gradient(circle at 88% 92%, var(--color-accent-a10), transparent 50%),
    var(--color-bg);
}

/* ────────────────────────────────────────────────────────────────────────────
   PORTAL SURFACES (css/kit/portal.css, Phase 3b Batch 3: candidate portal).
   Layout measures of the logged-in pages; every colour is a kit role above.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --portal-main-min-h: calc(100vh - var(--nav-height));
  --dash-card-min: 280px;          /* dashboard tile column (auto-fill) */
  --dash-card-pad: calc(var(--space-6) + var(--space-1));
  --portal-section-pad: calc(var(--space-8) + var(--space-7));      /* 5rem */
  --portal-section-pad-phone: calc(var(--space-8) + var(--space-2)); /* 3.5rem */
  --portal-reading: 760px;         /* job detail column */
  --portal-list: 780px;            /* my applications column */
  --portal-narrow: 860px;          /* reading-width list pages (jobs, my applications) */
  --filter-min: 140px;             /* filter select width when the row wraps (phones) */
  --job-success-icon: 2.75rem;     /* tick tile on "Application submitted" */
  --profile-form-pad: calc(var(--space-8) - var(--space-2));  /* 2.5rem */
  --locked-opacity: 0.75;          /* saved, locked rows and entries */
  --profile-row-label-min: 110px;
  --profile-row-combo-min: 150px;
  --profile-row-name-min: 130px;
  --phone-list-min: 240px;
  --profile-gate-pad: clamp(1.75rem, 4vw, 2.75rem);
  --portal-wide: 1200px;           /* two-pane review pages (list + detail) */
  --review-placeholder-h: 360px;   /* empty detail pane */
  --review-fact-min: 160px;        /* listing fact tile column (auto-fill) */
  --portal-form: 800px;            /* listing editor column (post-job) */
  --listing-degree-min: 195px;     /* degree option column (auto-fill) */
  --listing-currency-w: 90px;      /* salary currency select */
  --listing-time-min: 120px;       /* working-hours from / to selects */
  --listing-zone-min: 200px;       /* working-hours timezone select */
  --listing-num-w: 130px;          /* contract length number */
  --listing-lang-min: 150px;       /* language select in a requirement row */
  --portal-split: 1120px;          /* two-pane candidate review (employer-shortlisted) */
  --review-placeholder-h-sm: 320px;
  --slist-job-max: 180px;          /* job title in the candidate list */
  --slist-menu-min: 210px;         /* "Cancel interview" menu */
  --slist-bar-min: 140px;          /* match-score bar */
  --slist-crit-cols: 140px 1fr 1fr 52px;  /* requirements comparison grid */
  --portal-slots: 900px;           /* interview slots page column */
  --slots-side-min: 220px;         /* add-slot form: times column beside the calendar */
  --slots-chips-min: 28px;         /* selected-date chip row */
  --slots-check: 12px;             /* slot select checkbox */
  --slots-date-min: 100px;         /* inline slot edit: date */
  --slots-time-w: 72px;            /* inline slot edit: time */
  --slots-meet-min: 180px;         /* meeting info box */
  --portal-profile: 720px;         /* company profile column */
  --portal-rapp: 960px;            /* recruiter applications column */
  --rapp-search-min: 160px;        /* job search field */
  --rapp-score-min: 120px;         /* applicant row score bar */
  --rapp-bar-min: 160px;           /* comparison match-score bar */
  --rapp-text-min: 220px;          /* interview information textarea */
  --rapp-menu-min: 220px;          /* "Cancel interview" menu */
  --rapp-picker-max: 220px;        /* new-slot picker list (scrolls) */
  --rapp-check: 15px;              /* send-profile note checkbox */
  --rlist-search-min: 180px;       /* list page search field */
  --rlist-filter-min: 140px;       /* list page secondary text filter */
  --rhire-fact-min: 180px;         /* hired detail fact tile column (auto-fill) */
  --rjr-req-w: 110px;              /* job review: Required / Optional select */
  --portal-rprof: 560px;           /* recruiter My Profile column */
  --portal-sup: 1100px;            /* chat & support column */
  --sup-results-max: 200px;        /* new-chat recipient results (scrolls) */
  --sup-send-min: 130px;           /* ticket Send Reply button */
  --sup-search-min: 240px;         /* audit log filter field */
  --ausr-search-min: 220px;        /* admin users: search field */
  --adm-filter-min: 160px;         /* admin list pages: filter select */
  --aedit-danger-text: 52ch;       /* admin edit user: danger zone text */
  --aban-card-pad: clamp(1.5rem, 3vw, 2.25rem); /* admin IP bans: card padding */
  --sup-status-min: 140px;         /* ticket status select (the row wraps below this) */
  --sup-thread-min: 320px;         /* ticket conversation thread */
  --sup-thread-max: 520px;
  --cinq-pane: 680px;              /* contact inquiry column */
  --cinq-empty-text: 340px;        /* caught-up empty state text */
  --cinq-step: 30px;               /* inquiry prev / next buttons */
  --profile-platform-check: 14px;  /* native checkbox in a platform chip */
}

/* ────────────────────────────────────────────────────────────────────────────
   SITE-WIDE ONE-OFFS (css/kit/global.css, css/portal-editorial.css; Phase 3b
   Batch 7). Exact values of the last legacy literals, kept so the pages do not
   change; each is used by one element only.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --text-note: 0.9rem;             /* 2FA secret code, tutorial body */
  --text-tfa-hint: 0.82rem;        /* 2FA "can't scan?" details */
  --text-otp: 1.5rem;              /* 6-box OTP digit */
  --text-otp-sm: 1.25rem;          /* OTP digit on phones, OTP dash */
  --text-tour-close: 1.4rem;       /* tutorial close (x) */
  --text-cookie-btn: 0.74rem;      /* cookie banner "Got it" */
  --text-portal-h2: clamp(1.5rem, 2.6vw, 2.1rem); /* portal main h2 */
  --text-portal-th: 0.68rem;       /* portal table head */
  --text-portal-td: 0.92rem;       /* portal table cell */
  --tour-dim: var(--palette-slate-900-a55);       /* tutorial dim around the spotlight */
  --tour-dim-spread: 9999px;       /* outline that dims the whole viewport */
}

/* ────────────────────────────────────────────────────────────────────────────
   NOT TOKENS: the cross-document view-transition opt-in. It lives here because
   this is the first stylesheet and has no @import: a sheet with @imports (like
   css/kit.css) only applies once every import has loaded, which is too late
   for a quick redirect (the logged-out jobs page aborted its transition when
   the opt-in moved into the kit). Was the end of css/style.css until Batch 7.
   ──────────────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────
   CROSS-DOCUMENT VIEW TRANSITIONS (2026-06-25)
   Modern browsers (Chrome 126+, Safari 18+) crossfade between same-origin
   navigations. Naming the nav & footer keeps them visually anchored, only
   the main content swaps, so clicking a nav link no longer feels like a hard
   reload. Browsers without support fall back to normal navigation.
   ────────────────────────────────────────────────────────────────────────── */

@view-transition {
  navigation: auto;
}
body.is-marketing-site .nav { view-transition-name: site-nav; }
body.is-marketing-site .footer { view-transition-name: site-footer; }

/* Faster default cross-fade for the body so the swap feels snappy. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}