/* JobStressCheck brand kit.

   This file is the single source for how the site looks. styles.css contains no raw colours, type
   sizes, spacing, radii, borders, shadows or timings; it only refers to the tokens below.
   To change the look of the whole site, change a value here:

     - a brand colour        edit the palette (section 1)
     - which colour is used  edit the colour roles (section 2)
     - the h1 size           edit --text-h1 (section 3)
     - how roomy things are  edit the spacing scale (section 4)
     - how round things are  edit the radii (section 5)

   Breakpoints cannot be custom properties, so styles.css uses these four everywhere:
     1100px  wide laptop: four-up grids become two-up
      960px  tablet: navigation collapses, two-column layouts stack
      700px  phone: single column
      420px  small phone: tightest header
*/
:root {
  /* 1. Brand palette: the raw colours. Nothing outside this section names a hex value. */
  --brand-white: #ffffff;
  --brand-ink: #0f1115;
  --brand-ink-soft: #2f3531;
  --brand-grey: #5a615c;
  --brand-cream: #f4f5f1;
  --brand-cream-deep: #ebede7;
  --brand-line: #daded6;
  --brand-line-strong: #c2c8be;
  --brand-mint: #4bd995;
  --brand-mint-light: #e6faf0;
  --brand-mint-mid: #c4f0d8;
  --brand-mint-deep: #0a7a4a;
  /* Accent families, each with a base for fills and marks, a light and a mid tint for surfaces, and a deep
     shade for text. Ink on any base is 6.8:1 or better, and a deep shade on its light tint is 5:1 or better.
     Sun is for caution only, and coral for severity and alerts; neither is used for identity or decoration. */
  --brand-sky: #5ba8ee;
  --brand-sky-light: #e8f3fe;
  --brand-sky-mid: #c5def9;
  --brand-sky-deep: #1b5ea8;
  --brand-sun: #f6b73c;
  --brand-sun-light: #fff5dc;
  --brand-sun-mid: #fbe3a3;
  --brand-sun-deep: #855400;
  --brand-coral: #f2766b;
  --brand-coral-light: #fdecea;
  --brand-coral-mid: #f8cbc6;
  --brand-coral-deep: #ae3329;
  --brand-lilac: #a38cf0;
  --brand-lilac-light: #f1edfd;
  --brand-lilac-mid: #dbd2fa;
  --brand-lilac-deep: #5944b4;
  --brand-rose: #ee86b9;
  --brand-rose-light: #fdeef6;
  --brand-rose-mid: #f8cfe3;
  --brand-rose-deep: #a3286a;

  /* 2. Colour roles: what each colour is for. Components use these. */
  --color-bg: var(--brand-white);
  --color-text: var(--brand-ink);
  --color-text-soft: var(--brand-ink-soft);
  --color-text-muted: var(--brand-grey);
  --color-surface: var(--brand-cream);
  --color-surface-strong: var(--brand-cream-deep);
  --color-border: var(--brand-line);
  --color-border-strong: var(--brand-line-strong);
  --color-rule: var(--brand-ink);
  --color-accent: var(--brand-mint);
  --color-accent-soft: var(--brand-mint-light);
  --color-accent-text: var(--brand-mint-deep);
  --color-inverse-bg: var(--brand-ink);
  --color-inverse-bg-hover: var(--brand-ink-soft);
  --color-inverse-text: var(--brand-white);
  --color-info: var(--brand-sky);
  --color-info-soft: var(--brand-sky-light);
  --color-info-border: var(--brand-sky-mid);
  --color-info-text: var(--brand-sky-deep);
  --color-caution: var(--brand-sun);
  --color-caution-soft: var(--brand-sun-light);
  --color-caution-border: var(--brand-sun-mid);
  --color-caution-text: var(--brand-sun-deep);

  /* Severity scale for scores and bands, from low to high. Every level takes ink text. Soft fills for
     chart zones, stronger ones for labels. Levels describe where a score sits, never a diagnosis. The diagram
     builder (tools/brandkit.py) reads them from here. */
  --level-0: var(--brand-mint-mid);
  --level-1: var(--brand-sun-mid);
  --level-2: var(--brand-sun);
  --level-3: var(--brand-coral-mid);
  --level-4: var(--brand-coral);

  /* 3. Type. One family; sizes, weights, leading and tracking are named by role. */
  --font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-display: -.04em;
  --tracking-heading: -.03em;
  --tracking-eyebrow: .1em;

  --text-caption: .8125rem;
  --text-small: .9375rem;
  --text-ui: 1rem;
  --text-body: 1.125rem;
  --text-lead: 1.25rem;
  --text-h5: 1.25rem;
  --text-h4: 1.5rem;
  --text-h3: 1.75rem;
  --text-h2: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  --text-quote: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
  --text-h1: clamp(2.2rem, 1.6rem + 2.2vw, 3.25rem);
  --text-display: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem);

  /* Ready-made type styles: font: var(--font-h1) sets weight, size, line height and family together. */
  --font-caption: var(--weight-regular) var(--text-caption)/var(--leading-normal) var(--font-family);
  --font-eyebrow: var(--weight-bold) var(--text-caption)/var(--leading-tight) var(--font-family);
  --font-small: var(--weight-regular) var(--text-small)/var(--leading-normal) var(--font-family);
  --font-ui: var(--weight-regular) var(--text-ui)/var(--leading-normal) var(--font-family);
  --font-ui-strong: var(--weight-semibold) var(--text-ui)/var(--leading-normal) var(--font-family);
  --font-body: var(--weight-regular) var(--text-body)/var(--leading-normal) var(--font-family);
  --font-lead: var(--weight-regular) var(--text-lead)/var(--leading-normal) var(--font-family);
  --font-h5: var(--weight-semibold) var(--text-h5)/var(--leading-snug) var(--font-family);
  --font-h4: var(--weight-semibold) var(--text-h4)/var(--leading-snug) var(--font-family);
  --font-h3: var(--weight-semibold) var(--text-h3)/var(--leading-snug) var(--font-family);
  --font-h2: var(--weight-semibold) var(--text-h2)/var(--leading-tight) var(--font-family);
  --font-quote: var(--weight-semibold) var(--text-quote)/var(--leading-snug) var(--font-family);
  --font-h1: var(--weight-bold) var(--text-h1)/var(--leading-tight) var(--font-family);
  --font-display: var(--weight-bold) var(--text-display)/var(--leading-tight) var(--font-family);

  /* 4. Spacing scale (rem, so it follows the reader's text size). */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --section-space: clamp(var(--space-10), 7vw, 6.5rem);

  /* 5. Shape: radii, borders, shadow. */
  --radius-xs: .375rem;
  --radius-sm: .625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-width: 1px;
  --border-width-strong: 2px;
  --bar-width: 4px;
  --border: var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);
  --border-rule: var(--border-width) solid var(--color-rule);
  --focus-ring: 3px solid var(--color-text);
  --shadow-soft: 0 14px 34px -24px rgba(15, 17, 21, .35);

  /* 6. Layout. */
  --wrap: 80rem;
  --page-gutter: var(--space-12);
  --measure-reading: 43.75rem;
  --rail-width: 13.75rem;
  --header-height: 6.75rem;
  --sticky-top: calc(var(--header-height) + var(--space-4));
  --control-sm: 2.75rem;
  --control-md: 3rem;
  --control-lg: 3.375rem;
  --image-ratio: 2;

  /* 7. Motion and stacking. */
  --duration-fast: .2s;
  --duration-base: .4s;
  --duration-slow: .8s;
  --duration-stagger: .06s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --z-dropdown: 5;
  --z-header: 8;
  --z-skip-link: 20;
}

/* The page gutter and header height step down with the viewport; components just read them. */
@media (max-width: 1100px) { :root { --page-gutter: var(--space-10); } }
@media (max-width: 700px) { :root { --page-gutter: var(--space-8); --header-height: 5.375rem; } }
@media (max-width: 420px) { :root { --page-gutter: var(--space-7); } }

/* 8. Tones. A tone class chooses the accent family that a component and everything inside it draws from:
   --tone for marks and fills, --tone-soft and --tone-mid for surfaces, --tone-deep for text. Mint is the default. */
:root, .tone-mint { --tone: var(--brand-mint); --tone-soft: var(--brand-mint-light); --tone-mid: var(--brand-mint-mid); --tone-deep: var(--brand-mint-deep); }
.tone-sky { --tone: var(--brand-sky); --tone-soft: var(--brand-sky-light); --tone-mid: var(--brand-sky-mid); --tone-deep: var(--brand-sky-deep); }
.tone-lilac { --tone: var(--brand-lilac); --tone-soft: var(--brand-lilac-light); --tone-mid: var(--brand-lilac-mid); --tone-deep: var(--brand-lilac-deep); }
.tone-rose { --tone: var(--brand-rose); --tone-soft: var(--brand-rose-light); --tone-mid: var(--brand-rose-mid); --tone-deep: var(--brand-rose-deep); }