/* ===========================================================================
   PANELVAN — THE TOKENS
   Every colour, font, corner, gutter and shadow lives here, and only here.
   Lifted from Robot Sandwich (which lifted them from Prompter). Copied, not
   imported: no shared dependency, no coupling.
   A page never writes its own colour. If it needs a new one, it goes here.
   =========================================================================== */
:root{
  /* Core */
  --red:#ED1C24; --red-dark:#C8141B;
  --ink:#1A1917; --white:#FFFFFF; --black:#000000;
  --paper:#F5F3EF; --border:#E8E5E0; --mid:#9A9590;
  --ink-soft:#5E5A55;            /* second lines of text on white */
  --mist:#D6D2CB;                /* a question not reached yet, on red */

  /* White-on-red overlays */
  --white-hi:rgba(255,255,255,.75);
  --white-mid:rgba(255,255,255,.45);
  --white-lo:rgba(255,255,255,.20);
  --shade:rgba(26,25,23,.68);    /* behind the sign-in card */

  /* Flags and diffs */
  --yellow:#FAF06E; --delta:rgba(237,28,36,.13);

  /* Layout */
  --g:32px;
  --foot:48px;    /* the footer strip; the top bar is 65 */
  --pill:100px; --r-card:14px; --r-input:10px;   /* three corners, and nothing else */

  /* Type: the faces */
  --display:'Bebas Neue',Impact,sans-serif;
  --label:'Oswald',var(--display),sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,Menlo,monospace;

  /* Type: the sizes. A voice getting louder. Every size in the app is one
     of these, except an initial in its circle (sized to the circle).
     head, title and shout are always Bebas. Inter never goes above lead. */
  --whisper:10px;   /* caps labels: TYPE, AGE, STARTING OUT */
  --quiet:12px;     /* hints, captions, chips */
  --say:14px;       /* the everyday line: buttons, links, second lines */
  --talk:16px;      /* reading text */
  --lead:20px;      /* the line that matters: under her name; small Bebas */
  --head:28px;      /* card headings, drawer titles, the answer */
  --title:56px;     /* page headings, the waiting screen */
  --shout:84px;     /* the door, the page pair, her name */

  /* Shadows, lightest to heaviest */
  --lift-card:0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05);
  --lift-knob:0 1px 4px rgba(0,0,0,.2);
  --lift-button:0 1px 6px rgba(0,0,0,.14);
  --lift-step:0 3px 10px rgba(0,0,0,.22);
  --lift-bounce:0 8px 24px rgba(0,0,0,.18);
  --lift-raised:0 10px 28px rgba(0,0,0,.18);
  --lift-pop:0 12px 40px rgba(0,0,0,.18);
  --lift-sheet:0 20px 60px rgba(0,0,0,.18);
  --lift-dialog:0 30px 60px -12px rgba(0,0,0,.6);
  --ring-white:0 0 0 2px var(--white);
  --ring-knob:0 0 0 4px rgba(237,28,36,.25);
  --glow-red:0 4px 12px rgba(237,28,36,.3);
}

/* on a phone, the two biggest steps come down */
@media (max-width:560px){
  :root{--title:42px; --shout:64px}
}