/* ============================================================
   THE LOOK OF THE WHOLE APP LIVES HERE.
   Change a value below and every screen and the quote PDF follow.
   Nothing else in the app hard-codes a colour, font or size.
   ============================================================ */
:root{
  /* Fonts: one family, chosen for dyslexic readers. Change the font link in templates/base.html too. */
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Brand */
  --brand: #0084CA;          /* Geek-Tech logo blue */
  --brand-strong: #0070B0;   /* buttons, links (darker for contrast) */
  --brand-soft: #E3F2FB;     /* light blue fills */
  --on-brand: #FFFFFF;

  /* Page */
  --canvas: #F3F4F1;         /* app background */
  --surface: #FFFFFF;        /* cards */
  --sunk: #ECEDE9;           /* inputs, segmented controls */
  --ink: #0F1215;            /* main text */
  --muted: #4B535B;          /* secondary text */
  --line: #E3E5E1;           /* borders */
  --line-2: #CFD2CC;         /* stronger borders */
  --hero: #0F1215;           /* the dark Ozzy card */
  --on-hero: #FFFFFF;

  /* Status */
  --ok: #0E7A52;   --ok-soft: #E3F4EC;
  --warn: #A04A00; --warn-soft: #FDEEDC;
  --bad: #B42318;  --bad-soft: #FDE7E5;

  /* Sizes (8px grid) */
  --u: 8px;
  --text: 17px;              /* body text, never below 16px */
  --text-small: 16px;
  --h1: 30px;
  --h2: 20px;
  --tap: 48px;               /* smallest thing you can tap */
  --radius: 16px;            /* one radius everywhere */
  --shadow: 0 1px 0 rgba(15,18,21,.04), 0 8px 24px -12px rgba(15,18,21,.18);

  /* Motion */
  --spring: cubic-bezier(.2,.9,.25,1.15);
  --ease: cubic-bezier(.2,.7,.2,1);
}