/* Vyzko theme tokens - "Considered" (heritage green)
   Drop into the app and reference the variables. Do NOT hardcode hex in templates.
   Fonts: load Hanken Grotesk (headings/wordmark) + Inter (body/UI) from Google Fonts. */

:root {
  /* Brand */
  --vy-ink:            #262320; /* primary text (warm near-black) */
  --vy-green:          #2F4A3C; /* primary brand / buttons / pin */
  --vy-green-hover:    #243A2F; /* darker, for hover/active */
  --vy-green-soft:     #5C7A6B; /* lighter green for subtle fills */
  --vy-terracotta:     #B4663F; /* warm accent: links, highlights */
  --vy-terracotta-hov: #8F4E2F;
  --vy-bone:           #F5F1EA; /* warm page background */
  --vy-paper:          #FFFFFF; /* card surface */
  --vy-stone:          #8A857C; /* muted text */
  --vy-line:           #E4DED3; /* borders / hairlines */

  /* Semantic roles (use these in components) */
  --color-text:        var(--vy-ink);
  --color-text-muted:  #6B675F;
  --color-bg:          var(--vy-bone);
  --color-surface:     var(--vy-paper);
  --color-primary:     var(--vy-green);
  --color-on-primary:  var(--vy-bone);
  --color-accent:      var(--vy-terracotta);
  --color-border:      var(--vy-line);

  /* REPORT STATUS COLOURS - reserved, never reuse as brand.
     Kept clearly distinct from the deep brand green. */
  --status-clear:      #3D8E77; /* looks clear  (teal-sage; D7 M1 - 163deg, away from brand 149deg) */
  --status-check:      #DDA01E; /* worth checking (approved status gold) */
  --status-know:       #6B5D52; /* worth knowing (ironstone neutral; D7 M2a - was blue) */
  --status-na:         #8A857C; /* couldn't check (grey) */

  /* Shape & type */
  --radius:            12px;
  --radius-sm:         8px;
  --font-head: 'Hanken Grotesk','Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-body: 'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* data values: bearings, dates */
  /* Editorial display serif - h1/h2 DISPLAY headings only (warm-light gravitas). Body, labels,
     buttons, nav and the wordmark stay on Hanken/Inter. Self-hosted (see @font-face below); Georgia
     and Times New Roman are warm fallbacks if Fraunces fails to load (page never breaks). Reversible:
     drop the @font-face + this token and h1/h2 fall back to the serif fallbacks (or remove the
     font-family from the heading selectors to return to Hanken). */
  --font-serif-display: 'Fraunces','Georgia','Times New Roman',serif;
  /* Terracotta accent for display headings ONLY (rendered >= 24px): #B4663F on --vy-bone = 3.80:1,
     which passes WCAG AA for LARGE TEXT ONLY. Never use on body/label/button-size text. */
  --accent-heading: var(--vy-terracotta);

  /* Spacing scale (4/8/12/16/24/32/48/64) - one consistent rhythm across the shell. */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px;
  /* Hairline border alias - intent-named; --vy-line is the source colour. */
  --hairline: 1px solid var(--vy-line);
}

/* Self-hosted Fraunces (SIL Open Font Licence 1.1; licence shipped at /static/fonts/OFL.txt).
   A static 144pt-optical-size Light instance subset to Latin, served from 'self' - NO request to
   fonts.googleapis.com / fonts.gstatic.com, so no visitor IP leaks to Google and no CSP change is
   needed (font-src 'self' already covers it). font-display: swap keeps text readable before load. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/Fraunces144pt-Light.woff2') format('woff2');
}