/* RoleBug design system v2.1 — tokens.css
   Generated by planning/design-system/build-tokens.py from ramps.studio output.
   Source: b=6d28d9 a=0d9488 xr=accent-2 c=AA v=bold (primary, fit, status) + approved-surfaces-sep23.json (A3 + S1 + solid violet selection).
   Layer 1 = raw ramps. Layer 2 = ramps semantic tokens (light default; dark enabled under [data-theme=dark]).
   Elevation: --shadow-* / --edge-* from depths.studio (preset in DEPTHS_FILE, approved neutral shadow ink, one light source at 90°).
   Layer 3 = RoleBug domain tokens. Screens use Layer 3 and Layer 2 only. Never Layer 1 directly. Never a literal hex. */

:root{
  color-scheme:light;
  /* ── Layer 1: ramps ── */
  --primary-50:#f6f4ff; --primary-100:#ebe8ff; --primary-200:#dad2ff; --primary-300:#c2b4ff; --primary-400:#a78bff; --primary-500:#9368ff; --primary-600:#813cf9; --primary-700:#6920d4; --primary-800:#5209ac; --primary-900:#3d0084; --primary-950:#240054;
  --fit-50:#e1fdf8; --fit-100:#ccf5ef; --fit-200:#a9e8de; --fit-300:#7dd3c7; --fit-400:#4bb6aa; --fit-500:#259f93; --fit-600:#00867b; --fit-700:#006b62; --fit-800:#00534c; --fit-900:#003d37; --fit-950:#002420;
  --neutral-0:#ffffff; --neutral-50:#fcfcfd; --neutral-100:#eef0f3; --neutral-200:#dce0e6; --neutral-300:#c5cbd3; --neutral-400:#a5aeb9; --neutral-500:#8b929e; --neutral-600:#606773; --neutral-700:#464b55; --neutral-800:#2b2f36; --neutral-900:#202329; --neutral-950:#141619;
  --success-50:#e1ffe6; --success-100:#c9fad1; --success-200:#a4eeb3; --success-300:#75da8d; --success-400:#3ebe66; --success-500:#01a74c; --success-600:#008c3e; --success-700:#007030; --success-800:#005624; --success-900:#003f18; --success-950:#00260c;
  --warning-50:#fff5e0; --warning-100:#fce9c2; --warning-200:#f1d69b; --warning-300:#e0bb6c; --warning-400:#c59b37; --warning-500:#af8400; --warning-600:#926e00; --warning-700:#755700; --warning-800:#5b4300; --warning-900:#423000; --warning-950:#281c00;
  --error-50:#fff3f1; --error-100:#ffe4e0; --error-200:#ffcbc4; --error-300:#ffa59a; --error-400:#fc7064; --error-500:#e4544b; --error-600:#c73b35; --error-700:#a62422; --error-800:#851213; --error-900:#650508; --error-950:#410002;

  /* ── Layer 2: semantic (light) ── */
  --bg-canvas:#ffffff;  /* Page background */
  --bg-surface:#fcfcfd;  /* Card, panel */
  --bg-surface-raised:#fcfcfd;  /* Dropdown menu */
  --bg-muted:#eef0f3;  /* Table row hover */
  --bg-brand:#813cf9;  /* Primary button */
  --bg-brand-hover:#6920d4;  /* Cursor over that button */
  --bg-brand-active:#5209ac;  /* Button while pressed */
  --bg-accent:#006b62;  /* Secondary button */
  --bg-accent-hover:#00534c;  /* Cursor over secondary */
  --bg-accent-active:#003d37;  /* Secondary while pressed */
  --bg-success:#007030;  /* Success badge */
  --bg-success-subtle:#c9fad1;  /* Success banner */
  --bg-warning:#af8400;  /* Warning badge */
  --bg-warning-subtle:#fce9c2;  /* Warning banner */
  --bg-error:#c73b35;  /* Destructive button */
  --bg-error-subtle:#ffe4e0;  /* Error banner */
  --text-primary:#202329;  /* Body copy */
  --text-secondary:#464b55;  /* Helper text */
  --text-tertiary:#606773;  /* Timestamps, captions */
  --text-disabled:#a5aeb9;  /* Greyed-out label */
  --text-link:#6920d4;  /* Inline link */
  --text-on-brand:#f6f4ff;  /* Label on a primary button */
  --text-on-accent:#e1fdf8;  /* Label on a secondary button */
  --text-on-success:#e1ffe6;  /* Label on a success badge */
  --text-on-warning:#281c00;  /* Label on a warning badge */
  --text-on-error:#fff3f1;  /* Label on a destructive button */
  --text-success:#007030;  /* Saved confirmation */
  --text-error:#a62422;  /* Field error message */
  --text-warning:#755700;  /* Quota running low */
  --border-subtle:#dce0e6;  /* Divider between rows */
  --border-default:#dce0e6;  /* Input outline */
  --border-strong:#8b929e;  /* Emphasised card edge */
  --border-active:#813cf9;  /* Selected tab */
  --border-error:#e4544b;  /* Outline on a bad field */
  --bg-inverse:#202329;  /* Tooltip, toast */
  --text-inverse:#fcfcfd;  /* Text on a tooltip */
  --ring-focus:#9368ff;  /* Keyboard focus ring */

  /* ── Layer 3: RoleBug domain ── */
  --action-primary:var(--primary-600);  /* Primary button fill, hero, active nav marker */
  --action-primary-text:var(--neutral-0);  /* Label on primary */
  --action-primary-hover:var(--primary-700);
  --action-primary-active:var(--primary-800);
  --action-secondary-border:var(--neutral-500);  /* Outline button border (decorative; label carries identification) */
  --control-border:var(--neutral-600);  /* Form outline on white canvas and near-white cards */
  --action-secondary-text:var(--neutral-900);  /* Outline button label */
  --action-link:var(--primary-700);  /* Inline link on canvas/surface */
  --brand-hero:var(--primary-600);  /* Large brand block */
  --brand-hero-text:var(--neutral-0);
  --brand-wash:var(--primary-100);  /* Tinted surface: callout and selected chip; navigation has dedicated tokens */
  --brand-deep:var(--primary-800);  /* Text on brand-wash */
  --ring-focus:var(--primary-600);  /* Keyboard focus ring, 3px, offset 3px */
  --nav-surface:var(--neutral-100);  /* S1 rail and mobile drawer */
  --nav-text:var(--neutral-700);  /* Unselected label and icon */
  --nav-hover:var(--neutral-50);  /* Neutral hover, distinct from selected */
  --nav-selected:var(--primary-600);  /* Persistent selected destination */
  --nav-selected-text:var(--neutral-0);  /* White selected label and icon */
  --fit-weak:var(--fit-700);  /* Score/evidence bar + pill, lowest band */
  --fit-partial:var(--fit-800);
  --fit-strong:var(--fit-900);
  --fit-weak-text:var(--neutral-0);
  --fit-partial-text:var(--neutral-0);
  --fit-strong-text:var(--neutral-0);
  --fit-track:var(--neutral-600);  /* Hollow bar outline; bar interior is bg-surface */
  --fit-wash:var(--fit-50);  /* Verdict/explanation box background */
  --fit-deep:var(--fit-900);  /* Text on fit-wash */
  --stage-draft:var(--neutral-400);
  --stage-sent:var(--neutral-700);
  --stage-replied:var(--fit-700);
  --stage-interview:var(--fit-900);

  /* ── shape & type (unchanged from current app; not colour) ── */
  --radius-none:0; --radius-document:2px; --radius-round:50%; --scrim:rgb(24 27 34 / 45%); --nav-active-shadow:none;
  --radius-control:10px; --radius-card:14px; --radius-chip:6px;
  --shadow-none:none;  /* Inputs, list rows, table cells—anything that belongs to the page rathe */
  --shadow-raised:0px 1px 2.6px rgb(24 27 34 / 7%), 0px 0.4px 5.7px rgb(24 27 34 / 4.6%);  /* The default for anything that reads as an object: cards, tiles, button */
  --shadow-hover:0px 1.9px 4.9px rgb(24 27 34 / 6.7%), 0px 0.7px 10.9px rgb(24 27 34 / 4.3%);  /* On hover or focus of an element that is shadow-raised at rest, so the  */
  --shadow-sticky:0px 1.9px 4.9px rgb(24 27 34 / 6.7%), 0px 0.7px 10.9px rgb(24 27 34 / 4.3%);  /* Bars that pin over scrolling content, the moment content actually pass */
  --shadow-dropdown:0px 3.6px 9.4px rgb(24 27 34 / 6.3%), 0px 1.3px 20.6px rgb(24 27 34 / 4.1%);  /* Transient surfaces summoned from a control and dismissed by a click el */
  --shadow-modal:0px 6.9px 17.8px rgb(24 27 34 / 6%), 0px 2.4px 39.2px rgb(24 27 34 / 3.9%);  /* Surfaces that block the page behind a scrim and hold focus until dismi */
  --shadow-toast:0px 13px 33.9px rgb(24 27 34 / 5.7%), 0px 4.6px 74.5px rgb(24 27 34 / 3.7%);  /* The top of the stack: transient messages that float over everything, i */
  --shadow-pressed:inset 0px 0.8px 2.5px rgb(24 27 34 / 9.1%);  /* Wells, active toggle tracks, pressed button states—surfaces pushed bel */
  --edge-raised:1px solid rgb(0 0 0 / 7.5%);
  --edge-hover:1px solid rgb(0 0 0 / 9%);
  --edge-sticky:1px solid rgb(0 0 0 / 9%);
  --edge-dropdown:1px solid rgb(0 0 0 / 10.5%);
  --edge-modal:1px solid rgb(0 0 0 / 12%);
  --edge-toast:1px solid rgb(0 0 0 / 13.5%);
  --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* type scale (display face for h1/h2/score numbers; body face for everything else) */
  --type-h1:500 38px/1.08 var(--font-display); --type-h1-tracking:-.02em;
  --type-h2:500 22px/1.2 var(--font-display); --type-h2-tracking:-.01em;
  --type-h3:600 14px/1.4 var(--font-sans);
  --type-body:400 14px/1.5 var(--font-sans); --type-lede:400 15px/1.55 var(--font-sans);
  --type-caption:400 12.5px/1.4 var(--font-sans); --type-eyebrow:700 12px/1.2 var(--font-sans); --type-eyebrow-tracking:.08em;
  --type-score:700 64px/1 var(--font-display); --type-score-tracking:-.04em;
  --gauge-size:280px;
  /* verdict hero: violet block with the near-white gauge card set into it. One per verdict screen. */
  --hero-sheen:radial-gradient(ellipse at 90% 10%,rgba(255,255,255,.22),transparent 50%),radial-gradient(ellipse at 0% 100%,rgba(0,0,0,.14),transparent 45%);
  --hero-pad:30px 32px; --hero-card-radius:12px; --hero-outline:1px solid rgba(255,255,255,.4);
}

/* Dark appearance: explicit preference or system choice on app routes. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-canvas:#141619;
  --bg-surface:#202329;
  --bg-surface-raised:#2b2f36;
  --bg-muted:#2b2f36;
  --bg-brand:#9368ff;
  --bg-brand-hover:#a78bff;
  --bg-brand-active:#c2b4ff;
  --bg-accent:#259f93;
  --bg-accent-hover:#4bb6aa;
  --bg-accent-active:#7dd3c7;
  --bg-success:#01a74c;
  --bg-success-subtle:#003f18;
  --bg-warning:#c59b37;
  --bg-warning-subtle:#423000;
  --bg-error:#e4544b;
  --bg-error-subtle:#650508;
  --text-primary:#eef0f3;
  --text-secondary:#c5cbd3;
  --text-tertiary:#a5aeb9;
  --text-disabled:#606773;
  --text-link:#a78bff;
  --text-on-brand:#240054;
  --text-on-accent:#002420;
  --text-on-success:#00260c;
  --text-on-warning:#281c00;
  --text-on-error:#410002;
  --text-success:#3ebe66;
  --text-error:#fc7064;
  --text-warning:#c59b37;
  --border-subtle:#2b2f36;
  --border-default:#464b55;
  --border-strong:#606773;
  --border-active:#9368ff;
  --border-error:#e4544b;
  --bg-inverse:#eef0f3;
  --text-inverse:#202329;
  --ring-focus:#a78bff;
  --action-primary:var(--primary-600);
  --action-primary-text:var(--neutral-0);
  --action-primary-hover:var(--primary-700);
  --action-primary-active:var(--primary-800);
  --action-secondary-border:var(--neutral-500);
  --control-border:var(--neutral-500);
  --action-secondary-text:var(--neutral-100);
  --action-link:var(--primary-400);
  --brand-hero:var(--primary-600);
  --brand-hero-text:var(--neutral-0);
  --brand-wash:var(--primary-900);
  --brand-deep:var(--primary-300);
  --ring-focus:var(--primary-400);
  --nav-surface:var(--neutral-900);
  --nav-text:var(--neutral-300);
  --nav-hover:var(--neutral-800);
  --nav-selected:var(--primary-600);
  --nav-selected-text:var(--neutral-0);
  --fit-weak:var(--fit-500);
  --fit-partial:var(--fit-400);
  --fit-strong:var(--fit-300);
  --fit-weak-text:var(--neutral-950);
  --fit-partial-text:var(--neutral-950);
  --fit-strong-text:var(--neutral-950);
  --fit-track:var(--neutral-500);
  --fit-wash:var(--fit-950);
  --fit-deep:var(--fit-200);
  --stage-draft:var(--neutral-500);
  --stage-sent:var(--neutral-300);
  --stage-replied:var(--fit-500);
  --stage-interview:var(--fit-300);
  --shadow-none:none;
  --shadow-raised:0px 1px 2.6px rgb(0 0 0 / 10.5%), 0px 0.4px 5.7px rgb(0 0 0 / 6.9%);
  --shadow-hover:0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%);
  --shadow-sticky:0px 1.9px 4.9px rgb(0 0 0 / 10.1%), 0px 0.7px 10.9px rgb(0 0 0 / 6.5%);
  --shadow-dropdown:0px 3.6px 9.4px rgb(0 0 0 / 9.5%), 0px 1.3px 20.6px rgb(0 0 0 / 6.2%);
  --shadow-modal:0px 6.9px 17.8px rgb(0 0 0 / 9%), 0px 2.4px 39.2px rgb(0 0 0 / 5.9%);
  --shadow-toast:0px 13px 33.9px rgb(0 0 0 / 8.6%), 0px 4.6px 74.5px rgb(0 0 0 / 5.5%);
  --shadow-pressed:inset 0px 0.8px 2.5px rgb(0 0 0 / 13.7%);
  --edge-raised:1px solid rgb(255 255 255 / 7.5%);
  --edge-hover:1px solid rgb(255 255 255 / 9%);
  --edge-sticky:1px solid rgb(255 255 255 / 9%);
  --edge-dropdown:1px solid rgb(255 255 255 / 10.5%);
  --edge-modal:1px solid rgb(255 255 255 / 12%);
  --edge-toast:1px solid rgb(255 255 255 / 13.5%);
}