/* =====================================================
   DESIGN TOKENS — maik lopez ai
   Single source of truth for all colours and typography.
   Import this first in every page stylesheet.
   ===================================================== */

:root {
  /* Backgrounds */
  --bg:          #0C0A08;
  --bg2:         #131009;
  --bg3:         #1A1510;

  /* Text */
  --cream:       #F2E8D5;
  --cream-muted: #C9BC9E;
  --white:       #FAF6EE;

  /* Accent */
  --amber:       #D4870A;
  --amber-light: #F0A825;
  --amber-glow:  rgba(212,135,10,.15);

  /* Secondary accents */
  --magenta:     #a2195b;
  --terra-light: #E8865C;

  /* Lines */
  --line:        rgba(242,232,213,.12);
  --line-amber:  rgba(212,135,10,.3);
}

/* =====================================================
   TYPOGRAPHY — Google Fonts must be preloaded on page
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Lora:ital,wght@0,400;0,500;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
   ===================================================== */

/* Font roles:
   Playfair Display — headings, pull quotes, story text (editorial serif)
   Lora            — body copy (readable serif)
   Syne            — labels, CTAs, UI elements (geometric sans)
*/