/* ProperPics design tokens (M13.1) — the ONLY place colours, spacing, radii,
   shadows and type are defined. Two surfaces:
   - light "shell" for navigation, forms, job pages
   - true-neutral dark "canvas" for the review grid & compare (photo honesty)
   Accent is petrol teal: chosen because the verdict triad owns green/amber/
   red, and brass (the old accent) collided with HUMAN_REVIEW amber. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
/* Newsreader — the serif wordmark + landing/marketing display face. Self-hosted
   (POPIA: no third-party CDN), like Inter. One latin-subset variable woff2 spans
   weights 400–600, so a single file serves the wordmark (400) and headings (500). */
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* type */
  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
  /* serif wordmark; was "Iowan Old Style" — a macOS-only system font that was
     never self-hosted. Newsreader is self-hosted and carries the whole redesign. */
  --font-brand: "Newsreader", Georgia, "Times New Roman", serif;
  /* marketing display: hero, section headings, big stat/metric numerals. */
  --font-brand-display: "Newsreader", Georgia, "Times New Roman", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-md: 0.95rem;
  --text-lg: 1.15rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  /* M18: marketing display sizes — the app scale tops out at 2xl, too small for a
     landing hero. Used by the landing page only, but defined here so the page CSS
     references tokens, never raw sizes. */
  --text-3xl: 2.25rem;
  --text-4xl: clamp(2.4rem, 1.4rem + 3.6vw, 3.4rem);
  --leading: 1.55;
  --tnum: "tnum" 1;

  /* spacing & shape */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px;
  --shadow-card: 0 1px 2px rgb(28 26 22 / 0.06), 0 4px 16px rgb(28 26 22 / 0.05);
  --shadow-pop: 0 8px 40px rgb(0 0 0 / 0.35);
  --shadow-cta: 0 8px 20px rgb(14 116 144 / 0.22);   /* teal lift under hero/pricing CTAs */

  /* accent — petrol teal */
  --accent: #0E7490;
  --on-accent: #fff;       /* readable foreground ON the accent (teal) */
  --accent-strong: #0C5F76;
  --accent-soft: #E0F1F5;
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--accent);

  /* brand */
  --brass: #C7A56A; /* wordmark ".co.za" ONLY — the single place brass survives.
                       Mockup value; brief §3 had #A8854B (recorded in RESOLVED_DECISIONS). */
}

[data-surface="light"] {
  --bg: #F6F4EF;
  --bg-card: #FFFFFF;
  --bg-inset: #EFECE5;
  --ink: #1F1D19;
  --ink-soft: #5C574D;
  --ink-faint: #6E685C;   /* AA: ≥4.69:1 on bg/card/inset (was #8C867A, 3.1–3.6) */
  --ink-faint-2: #8C8678; /* mid-faint: stat sources, blurbs — large/non-essential text only */
  --ink-faint-3: #A39C8C; /* lightest: legal/captions only — never body or controls */
  --line: #E3DFD6;
  --accent-tint-row: #F3FAFC;       /* "checked treatment option" row bg (a teal derivation, NOT a 2nd accent) */
  --accent-tint-row-line: #BFE0E9;  /* its border */
  --trust-band: #E6F0F3;            /* pale-teal band behind the landing honest-staging section */
  --pass: #147A3A;       --pass-bg: #EAF5EE;   /* AA: 4.85:1 on -bg (badge text) */
  --review: #A8500A;     --review-bg: #FBF1E5; /* AA: 4.93:1 on -bg (badge text) */
  --regen: #B91C1C;      --regen-bg: #FBEAEA;
  --neutral-badge: #5C574D; --neutral-badge-bg: #EFECE5;
}

[data-surface="dark"] {
  --bg: #171717;          /* true neutral — photo colours read honestly */
  --bg-card: #212121;
  --bg-inset: #2A2A2A;
  --ink: #ECECEC;
  --ink-soft: #A8A8A8;
  --ink-faint: #9A9A9A;   /* AA: ≥5.10:1 on bg/card/inset (was #7A7A7A, 3.3–4.2) */
  --line: #333333;
  --accent-soft: #123A46;
  --focus-ring: 0 0 0 2px #171717, 0 0 0 4px #22A3C4;
  --accent: #22A3C4;     /* lifted for AA on dark */
  --on-accent: #181818;  /* dark text reads better on bright cyan */
  --accent-strong: #5FC4DE;
  --pass: #4ADE80;       --pass-bg: #14301F;
  --review: #FBBF24;     --review-bg: #33270D;
  --regen: #F87171;      --regen-bg: #371616;
  --neutral-badge: #A8A8A8; --neutral-badge-bg: #2A2A2A;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
}

/* M17: the operator console. A distinct slate + amber treatment so an operator
   always knows which hat they're wearing — guards against support-blind work or
   leaking an admin view in a screenshare. Same components, different density. */
[data-surface="admin"] {
  --bg: #14181D;
  --bg-card: #1C222A;
  --bg-inset: #232B34;
  --ink: #ECEFF2;
  --ink-soft: #A3ADB8;
  --ink-faint: #8A98A6;   /* AA: ≥4.86:1 on bg/card/inset (was #6F7B86, 3.3–4.1) */
  --line: #2E3742;
  --accent: #F59E0B;       /* operator amber */
  --on-accent: #181818;    /* dark text reads better on amber */
  --accent-strong: #FBBF24;
  --accent-soft: #3A2A09;
  --focus-ring: 0 0 0 2px #14181D, 0 0 0 4px #F59E0B;
  --pass: #4ADE80;       --pass-bg: #14301F;
  --review: #FBBF24;     --review-bg: #33270D;
  --regen: #F87171;      --regen-bg: #371616;
  --neutral-badge: #A3ADB8; --neutral-badge-bg: #232B34;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}