/* ============================================================
   BEATS&BYTES — Design Tokens  ·  SINGLE SOURCE OF TRUTH
   mcartigo.nosso.top · MC Artigo · Ramon Maia

   This file is imported by css/shared.css and linked directly
   by index.html. Do NOT redeclare these tokens elsewhere —
   edit them here so values can never drift across pages.
   ============================================================ */

:root {

  /* --- Color: Backgrounds --- */
  --bg:          #090804;   /* Page background (near-black warm) */
  --surface:     #111009;   /* Card / header surface */
  --surface-2:   #1c1a10;   /* Secondary surface, hover state */

  /* --- Color: Foreground --- */
  --fg:          #eeeeee;   /* Primary text */
  --fg-2:        #b0b0b0;   /* Secondary text */
  --muted:       #8a8a85;   /* Muted / labels — WCAG AA (~5.8:1 on --bg) */

  /* --- Color: Borders --- */
  --border:      #1a1a1a;   /* Default border */
  --border-mid:  #2a2a2a;   /* Mid-emphasis border */

  /* --- Color: Accent (Red) --- */
  --accent:      #f04135;   /* Primary accent — red */
  --accent-deep: #cc3629;   /* Hover / pressed accent */
  --accent-on:   #090804;   /* Text on accent background */

  /* --- Color: Spotify --- */
  --spotify:     #1db954;

  /* --- Typography --- */
  --font-display:  'JetBrains Mono', ui-monospace, monospace;
  --font-headline: 'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', -apple-system, system-ui, sans-serif;

  /* --- Motion --- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* --- Layout --- */
  --gutter: clamp(16px, 5vw, 48px);   /* Horizontal page padding */
  --gap:    clamp(60px, 9vw, 108px);  /* Vertical section spacing */
  --max-w:  1280px;                   /* Max content width */

  /* --- Fluid display scale (the giant outline-text motif).
         Values match each consumer exactly so the motif shares one source. --- */
  --display-1: clamp(56px, 9vw, 110px);    /* section numbers   */
  --display-2: clamp(56px, 8vw, 96px);     /* artist name       */
  --display-3: clamp(64px, 15vw, 200px);   /* timeline years    */
  --display-4: clamp(100px, 16vw, 190px);  /* disc-card numbers */
  --display-5: clamp(100px, 22vw, 320px);  /* hero ghost word   */
  --display-6: clamp(72px, 12vw, 160px);   /* profile heading   */
  --display-7: clamp(160px, 28vw, 420px);  /* hero bg year      */

  /* --- Effects / motion (homepage aurora + spring transitions) --- */
  --aurora-1: rgba(240,65,53,.16);   /* brand red glow   */
  --aurora-2: rgba(232,124,43,.10);  /* warm amber glow  */
  --aurora-3: rgba(60,40,120,.10);   /* cool violet glow */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}