/* ============================================================
   2544 — TOKENS
   Every value sampled from the poster. One import gives a new
   page the whole system.
   ============================================================ */

:root {

  /* ---- paper ---- */
  --paper:      #EFEDEB;
  --paper-deep: #E6E4E1;

  /* ---- brand ----
     #05D0BC is the badge in the poster. #009688 is the mark in
     the favicon — the same hue, dark enough to set type on a
     light ground, which the bright one is not. */
  --teal:       #05D0BC;
  --teal-deep:  #009688;
  --teal-dark:  #00786D;
  --mint:       #C3E7E5;
  --taupe:      #AA9C90;

  /* ---- ink ---- */
  --ink:   #0C0F10;
  --ink-2: rgba(12,15,16,0.66);
  --ink-3: rgba(12,15,16,0.42);
  --ink-4: rgba(12,15,16,0.20);
  --rule:  rgba(12,15,16,0.10);

  /* ---- glass ----
     Real backdrop-filter. The paper texture behind it is what
     makes it read as glass rather than as a flat panel. */
  --blur:       18px;
  --glass:      rgba(255,255,255,0.42);
  --glass-edge: rgba(255,255,255,0.62);
  --glass-mint: rgba(195,231,229,0.52);
  --glass-mint-edge: rgba(255,255,255,0.58);
  --glass-warm: rgba(170,156,144,0.46);
  --glass-warm-edge: rgba(255,255,255,0.34);
  --drop:       0 18px 44px -20px rgba(12,15,16,0.42);
  --drop-lg:    0 28px 64px -24px rgba(12,15,16,0.50);

  /* ---- type ---- */
  --font-display: 'Geom', system-ui, sans-serif;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quote:   'Lora', Georgia, 'Times New Roman', serif;

  --fs-title: clamp(30px, 3.1vw, 52px);
  --fs-h2:    clamp(19px, 1.6vw, 24px);
  --fs-quote: clamp(17px, 1.42vw, 23px);
  --fs-body:  15px;
  --fs-sm:    13px;
  --fs-cap:   11px;

  --ls-title: -0.022em;
  --ls-cap:   0.1em;

  /* ---- shape ---- */
  --r-card: 22px;
  --r-md:   16px;
  --r-sm:   10px;
  --r-pill: 980px;

  /* ---- rhythm ---- */
  --gutter: clamp(18px, 3.4vw, 48px);
  --gap:    clamp(14px, 1.5vw, 22px);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-1: 220ms;
  --t-2: 520ms;

  /* ---- panel controlled ---- */
  --cover-radius: 18px;
}

@media (max-width: 900px) { :root { --blur: 14px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-1: 1ms; --t-2: 1ms; } }