/* EveryRole design tokens: the ONLY place raw colors and sizes live.
   Three layers, each built on the one before:
     1. primitives  the palette and the scales (never used directly by components)
     2. semantic    what a value means: text, surface, line, and the four result states
     3. component   sizes shared by one kind of component (controls, pills)
   Rules (checked by tests/test_design.py): app.css uses var(--...) for every color, spacing, radius and text size.
   Color only where it carries meaning: green passed · red broken · grey dashed couldn't check · amber 2nd try,
   and the brand (the logo's greens, static/logo.svg) on what you act with: primary buttons, the active tab or
   menu item, focus rings, the current step.
   The live reference of every token and component is the /design page of the web UI. */
:root {
  /* ------------------------------------------------------------ 1. primitives */
  --gray-0: #fff;
  --gray-25: #FAFBFC;
  --gray-50: #F8F9FA;
  --gray-75: #F6F7F8;
  --gray-100: #F4F5F7;
  --gray-125: #F1F2F4;
  --gray-150: #EEF0F2;
  --gray-175: #EAECEF;
  --gray-200: #E9EBEE;
  --gray-250: #E3E6EA;
  --gray-300: #D5D9DF;
  --gray-350: #C3C8D0;
  --gray-400: #B5BCC6;
  --gray-500: #9AA1AC;
  --gray-600: #646B76;
  --gray-650: #555D69;
  --gray-700: #4A515C;
  --gray-850: #2A2F37;
  --gray-900: #15181D;
  --gray-950: #0E1013;
  --stripe-a: #EDEFF2;
  --stripe-b: #F5F6F8;

  /* the logo's greens (static/logo.svg): the account stack, back to front */
  --brand-100: #A9E2C9;
  --brand-400: #4FBF93;
  --brand-600: #1F7A5A;
  --brand-700: #17624A;
  --brand-bright: #34D399;             /* on dark backgrounds (logo-dark.svg) */
  --brand-50: #EAF7F1;

  --green-50: oklch(0.955 0.04 150);
  --green-500: oklch(0.62 0.13 150);
  --green-700: oklch(0.5 0.12 150);
  --red-25: oklch(0.985 0.01 27);
  --red-50: oklch(0.965 0.025 27);
  --red-200: oklch(0.88 0.06 27);
  --red-500: oklch(0.58 0.19 27);
  --red-600: oklch(0.52 0.19 27);
  --red-700: oklch(0.45 0.17 27);
  --amber-50: oklch(0.96 0.045 85);
  --amber-200: oklch(0.85 0.08 80);
  --amber-400: oklch(0.75 0.12 80);
  --amber-450: oklch(0.72 0.13 75);
  --amber-700: oklch(0.5 0.11 65);

  /* spacing scale (px): 1 2 4 6 8 10 12 14 16 20 24 28 32 40 48 64 120 */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-30: 120px;

  /* text scale */
  --text-3xs: 9px;     /* labels inside thumbnails */
  --text-2xs: 11px;
  --text-xs: 12.5px;   /* meta, pills, tags */
  --text-sm: 13.5px;   /* secondary text, table cells */
  --text-md: 14px;     /* body in cards */
  --text-base: 15px;   /* page body */
  --text-lg: 16px;
  --text-xl: 17px;
  --text-2xl: 19px;
  --text-3xl: 22px;    /* h2 */
  --text-4xl: 24px;
  --text-5xl: 28px;    /* h1 */
  --text-6xl: 34px;    /* big numbers */
  --text-7xl: 40px;    /* first-time hero */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 650;
  --weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;

  /* corner radius */
  --radius-2xs: 3px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-full: 999px;

  /* ------------------------------------------------------------ 2. semantic */
  --ink: var(--gray-900);            /* main text, primary buttons */
  --ink-hover: var(--gray-850);
  --ink-2: var(--gray-700);          /* secondary text */
  --muted: var(--gray-600);          /* hints, meta */
  --faint: var(--gray-400);          /* separators, dashed "couldn't check" borders */
  --on-ink: var(--gray-0);           /* text on an --ink background */
  --link-hover: var(--brand-600);
  --brand: var(--brand-600);          /* primary buttons, the active tab, the current step */
  --brand-hover: var(--brand-700);
  --on-brand: var(--gray-0);
  --brand-soft: var(--brand-50);      /* the active menu item's background, focus rings */
  --brand-line: var(--brand-100);
  --line: var(--gray-250);           /* card borders */
  --line-2: var(--gray-150);         /* rows inside a card */
  --control: var(--gray-300);        /* input and button borders */
  --hover: var(--gray-100);
  --row-hover: var(--gray-25);
  --chip: var(--gray-125);
  --surface: var(--gray-0);          /* cards, header */
  --page: var(--gray-50);            /* page background */
  --panel: var(--gray-75);           /* a quiet box inside a card */
  --panel-line: var(--gray-175);
  --shade: var(--gray-200);          /* segmented control track */
  --screen: var(--gray-950);         /* behind videos and the live browser */
  --dot-off: var(--gray-500);
  --stripes: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);

  /* the four result states; nothing else is colored */
  --pass: var(--green-700);
  --pass-bg: var(--green-50);
  --pass-bar: var(--green-500);
  --pass-glow: color-mix(in oklch, var(--green-700) 50%, transparent);
  --pass-glow-0: color-mix(in oklch, var(--green-700) 0%, transparent);
  --bad: var(--red-600);
  --bad-bg: var(--red-50);
  --bad-row: var(--red-25);
  --bad-line: var(--red-200);
  --bad-bar: var(--red-500);
  --bad-ink: var(--red-700);
  --amber: var(--amber-700);
  --amber-bg: var(--amber-50);
  --amber-line: var(--amber-200);
  --amber-bar: var(--amber-400);
  --amber-mark: var(--amber-450);
  --unsure: var(--gray-650);
  --unsure-bar: var(--gray-350);

  --shadow-hover: 0 4px 16px rgba(20, 24, 29, .08);
  --focus-ring: 0 0 0 3px var(--brand-line);
  --focus-ring-bad: 0 0 0 3px var(--bad-bg);

  --sans: "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* ------------------------------------------------------------ 3. component */
  --control-sm: 32px;   /* small buttons, segmented items */
  --control-md: 38px;   /* buttons */
  --control-input: 40px;
  --control-lg: 42px;
  --control-title: 44px;
  --control-xl: 52px;   /* the first-time address field */
  --pill-height: 24px;
  --pill-height-lg: 28px;
  --header-height: 56px;
  --page-gutter: var(--space-6);
  --page-gutter-phone: var(--space-4);
  --page-max: 1180px;   /* an app page's width; wider screens center it */
  /* the top bar and banners line up with the centered page: its gutter, plus half of what is left over */
  --page-inline: max(var(--space-8), calc((100% - var(--page-max)) / 2 + var(--space-8)));
  --toast-width: 360px;  /* a finished test popping up during a run */
  --toast-shot: 72px;
  --pop-width: 420px;    /* a small panel a button opens (the next plan, side by side) */
  --toast-shadow: 0 12px 32px rgba(20, 24, 29, .18);
  --layer-toast: 50;     /* above the page and its menus */
  --modal-width: 1100px; /* a replay over the run report */
  --backdrop: rgba(20, 24, 29, .45);
  --stat-min: 220px;     /* a number card on Usage & credits */
  --ledger-when: 150px;  /* the usage log's columns */
  --ledger-num: 90px;
  --ledger-tokens: 170px;
  --ledger-credits: 80px;
  --ledger-model: 170px;  /* one model's cost in the admin */
  --ledger-columns: var(--ledger-when) 1fr var(--ledger-num) var(--ledger-credits);  /* set per table */
  --ledger-kind: 160px;
  --ledger-count: 60px;

  /* public site (hosted app: everyrole/saas/static/site.css): a dark hero band built from the same palette */
  --site-night: var(--gray-950);                 /* hero and closing bands */
  --site-night-2: var(--gray-900);
  --site-night-ink: var(--gray-0);
  --site-night-muted: var(--gray-400);
  --site-night-faint: var(--gray-500);
  --site-night-line: color-mix(in oklch, var(--gray-0) 11%, transparent);
  --site-night-line-2: color-mix(in oklch, var(--gray-0) 20%, transparent);
  --site-night-panel: color-mix(in oklch, var(--gray-0) 5%, transparent);
  --site-night-panel-2: color-mix(in oklch, var(--gray-0) 9%, transparent);
  --site-grid-line: color-mix(in oklch, var(--gray-0) 5%, transparent);
  --site-glow-pass: color-mix(in oklch, var(--green-500) 34%, transparent);
  --site-glow-amber: color-mix(in oklch, var(--amber-400) 20%, transparent);
  --site-glow-bad: color-mix(in oklch, var(--red-500) 16%, transparent);
  --site-glow-none: color-mix(in oklch, var(--gray-950) 0%, transparent);
  --site-heading-fill: linear-gradient(180deg, var(--gray-0) 35%, var(--gray-400) 110%);
  --site-glass: color-mix(in oklch, var(--gray-950) 78%, transparent);
  --site-glass-light: color-mix(in oklch, var(--gray-0) 82%, transparent);
  --site-soft: var(--gray-100);                  /* quiet section band on the light page */
  --site-shadow-shot: 0 40px 100px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --site-shadow-card: 0 1px 2px rgba(20, 24, 29, .04), 0 8px 24px -12px rgba(20, 24, 29, .12);
  --site-shadow-lift: 0 2px 4px rgba(20, 24, 29, .04), 0 22px 44px -18px rgba(20, 24, 29, .24);
  --site-shadow-float: 0 24px 60px -18px rgba(0, 0, 0, .45);
  --site-shadow-card-dark: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);  /* the site's dark theme */
  --site-shadow-lift-dark: 0 2px 4px rgba(0, 0, 0, .4), 0 22px 44px -18px rgba(0, 0, 0, .7);
  --site-display: clamp(38px, 5.6vw, 68px);      /* the home headline */
  --site-display-sm: clamp(34px, 5vw, 56px);     /* other pages' headline */
  --site-h2: clamp(28px, 3.8vw, 46px);
  --site-h3: clamp(18px, 1.6vw, 21px);
  --site-lead: clamp(17px, 1.5vw, 20px);
  --site-price: clamp(40px, 4vw, 48px);
  --site-width: 1200px;
  --site-width-text: 680px;
  --site-gutter: clamp(16px, 4vw, 32px);
  --site-section: clamp(80px, 11vw, 144px);      /* space between home sections */
  --site-hero-top: clamp(40px, 5.5vw, 80px);
  --site-nav-height: 64px;
  --site-radius-shot: 18px;
  --site-radius-card: 20px;
  --site-radius-band: 28px;
  --site-docs-nav: 232px;
  --site-float-width: 340px;                     /* a floating card over a screenshot */
  --site-tab-min: 132px;
  --site-reveal-shift: 18px;
  --site-width-hero: 960px;
  --site-width-doc: 760px;
  --site-form-width: 620px;
  --site-stage-overlap: clamp(72px, 14vw, 220px);  /* how far the hero screenshot hangs below the dark band */
  --site-state-width: 118px;
  --site-icon: 40px;
  --site-dot: 8px;
  --site-blur: 14px;
  --site-layer-nav: 40;
  --site-ease: cubic-bezier(.2, .7, .2, 1);
  --site-perspective: 1600px;
  --site-card-min: 290px;       /* narrowest card before a grid wraps */
  --site-card-min-sm: 220px;
  --site-field-min: 150px;
  /* the logo as a loader (ui.loader): its three cards stack, then the check draws */
  --logo-back: var(--brand-100);
  --logo-mid: var(--brand-400);
  --logo-front: var(--brand-600);
  --logo-check: var(--on-brand);
  --loader-sm: 20px;
  --loader-md: 40px;
  --loader-lg: 72px;
  --loader-cycle: 1.6s;
  --loader-delay: 450ms;   /* a page that opens faster than this never shows the loader */
  --layer-loader: 60;      /* above toasts */
  --page-veil: color-mix(in oklch, var(--page) 70%, transparent);
  --page-fade: 160ms;      /* the page loader fading in and out; the questions after sign-up sliding in */
}