/* tokens.css — design tokens of elchamoluso.com. DESIGN.md explains when to use each one.
   Loaded before styles.css on every page, and by scripts/og-card.html. Nothing else defines colours. */
:root{
  /* surfaces and text */
  --bg:#FBF8F2; --card:#FFFFFF; --border:#ECE4D6; --border-soft:rgba(236,228,214,.5); --border-strong:#E2D8C6;
  --fg1:#16212E; --fg2:#5B6675; --fg-on-blue:#FFFFFF;
  --glass:rgba(251,248,242,.92);

  /* blue: ink and interaction */
  --blue:#3B6E9D; --blue-tint-1:#5188B5; --blue-tint-2:#6094C2; --blue-deep:#1D5583; --blue-deep-hover:#16456B;
  --blue-wash:#EEF4FF; --blue-glow:rgba(59,110,157,.30); --spotlight:rgba(59,110,157,.07);
  --blue-line:#D3E1F0;

  /* orange: light, never text (2.3:1 on white). Orange text uses --orange-ink (5.3:1 on --bg). */
  --orange:#FE8C4A; --orange-tint-1:#FFAD60; --orange-tint-2:#FFCC73;
  --orange-ink:#A3501A; --orange-wash:#FFF2E8; --orange-line:#FFD3B8;

  /* type families */
  --font-display:"Noto Sans",sans-serif; --font-body:"Space Grotesk",sans-serif; --font-mono:"JetBrains Mono",monospace;

  /* type scale: 8 steps, nothing smaller than 11px */
  --fs-display:clamp(36px,6vw,44px); --lh-display:1.08;  /* name */
  --fs-h2:clamp(26px,3.2vw,30px);    --lh-h2:1.2;        /* section titles */
  --fs-h3:22px;                      --lh-h3:1.27;       /* sidebar role, figures */
  --fs-h4:17px;                      --lh-h4:1.4;        /* card titles */
  --fs-body:16px;                    --lh-body:1.65;     /* reading text */
  --fs-sm:14px;                      --lh-sm:1.55;       /* secondary text, buttons */
  --fs-label:12px;                   --lh-label:1.35;    /* mono caps: eyebrows, dates, nav */
  --fs-micro:11px;                   --lh-micro:1.45;    /* pills */
  --track-display:-.02em; --track-label:.12em; --track-micro:.04em;

  /* spacing: 4-point scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px; --space-10:96px;

  /* shape and depth */
  --radius-sm:10px; --radius-md:14px; --radius-lg:16px; --radius-pill:9999px;
  --shadow-nav:0 1px 2px rgba(0,0,0,.05);
  --shadow-card:0 4px 20px rgba(22,33,46,.04);
  --shadow-card-hover:0 14px 36px rgba(22,33,46,.09);
  --shadow-glow:0 0 18px var(--blue-glow);
  --shadow-glow-hover:0 0 26px var(--blue-glow);

  /* layout */
  --maxw:1152px; --gutter:24px;
}
@media (max-width:480px){ :root{ --gutter:20px; } }