/* ==========================================================================
   Design tokens — SmogSense landing page
   Palette is sampled from the team's project-promotion film so the site and
   the film read as one piece: grim greys for the problem, the BioRender
   lavender for the immunology, SmogSense blue once the project appears.
   ========================================================================== */

:root {
  /* --- Act I & II: the problem ------------------------------------------ */
  --ink:          #0b0d10;
  --ink-soft:     #171b21;
  --ink-line:     #22272f;

  --smog-900:     #4b525c;
  --smog-700:     #6b7280;
  --smog-500:     #8a909b;   /* PM2.5 particle body */
  --smog-300:     #a8aeb8;   /* PM2.5 particle highlight */
  --smog-150:     #d4d8de;
  --paper:        #f7f7f5;
  --paper-dim:    #e9e9e4;

  --alarm:        #c92a2a;
  --alarm-soft:   #e5484d;
  --alert:        #e8c547;

  /* --- Immunology -------------------------------------------------------- */
  --macro-fill:   #cfc2e8;
  --macro-fill-2: #ddd4f0;
  --macro-line:   #8b7bb8;
  --macro-nucleus:#9b8ec4;
  --cytokine:     #0b0d10;

  /* --- Act III: SmogSense ------------------------------------------------ */
  --brand:        #386e90;
  --brand-bright: #388ebb;
  --brand-amber:  #df9026;
  --brand-deep:   #0c233c;

  /* --- Type -------------------------------------------------------------- */
  /* Anton is declared in base.css but the file ships without it, so the
     display stack lands on Inter 900 with tight tracking. Drop
     assets/fonts/Anton-Regular.ttf in and it takes over automatically. */
  --font-display: 'Anton', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, 'Segoe UI', sans-serif;

  /* fluid type scale — clamp(min, preferred, max) */
  --t-mega:   clamp(3rem,   9.5vw, 10rem);
  --t-xl:     clamp(2.4rem, 6vw,   6rem);
  --t-lg:     clamp(1.8rem, 3.6vw, 3.4rem);
  --t-md:     clamp(1.1rem, 1.6vw, 1.45rem);
  --t-body:   clamp(1rem,   1.25vw, 1.2rem);
  --t-small:  clamp(0.75rem, 0.9vw, 0.9rem);

  /* --- Layout ------------------------------------------------------------ */
  --gutter:   clamp(1.5rem, 5vw, 6rem);
  --measure:  38ch;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --z-intro:   900;
  --z-cue:     60;
  --z-hud:     50;
}