/* ============================================================
   MOUK — Design Tokens
   The brand in variables. Change here, changes everywhere.
   ============================================================ */

:root {

  /* ── Core Palette ─────────────────────────────────────────
     Black is the canvas. Everything exists against darkness.
     Gold is the only warmth — earned, not given.
     White is clarity, truth, the word.                      */

  --void:          #000000;         /* absolute black        */
  --deep:          #0a0a0a;         /* near black surfaces   */
  --surface:       #111111;         /* elevated surfaces     */
  --surface-2:     #1a1a1a;         /* cards, panels         */
  --surface-3:     #242424;         /* hover states          */

  --gold:          #c9a84c;         /* earned, warm, rare    */
  --gold-bright:   #e8c46a;         /* highlights            */
  --gold-dim:      #7a6228;         /* subdued gold          */
  --gold-ghost:    rgba(201,168,76,0.08);
  --gold-glow:     rgba(201,168,76,0.20);
  --gold-border:   rgba(201,168,76,0.25);

  --white:         #ffffff;
  --off-white:     #f5f0e8;         /* warm, like paper      */
  --cream:         #ede8dc;

  --text-1:        #ffffff;
  --text-2:        #999990;
  --text-3:        #555550;
  --text-gold:     var(--gold);

  --border-1:      rgba(255,255,255,0.05);
  --border-2:      rgba(255,255,255,0.10);
  --border-gold:   var(--gold-border);

  --shadow-deep:   0 4px 40px rgba(0,0,0,0.8);
  --shadow-gold:   0 0 40px rgba(201,168,76,0.15);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Typography ──────────────────────────────────────────
     Display: Playfair Display — editorial gravitas, serif power
     Heading: Bebas Neue — raw, bold, condensed, street
     Body:    Epilogue — clean, slightly geometric, readable
     Accent:  Courier Prime — manifesto typewriter energy     */

  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-heading:  'Bebas Neue', 'Impact', sans-serif;
  --font-body:     'Epilogue', 'Helvetica Neue', sans-serif;
  --font-accent:   'Courier Prime', 'Courier New', monospace;

  /* ── Type Scale ──────────────────────────────────────────  */
  --t-2xs:   0.62rem;
  --t-xs:    0.72rem;
  --t-sm:    0.82rem;
  --t-base:  0.92rem;
  --t-md:    1rem;
  --t-lg:    1.15rem;
  --t-xl:    1.4rem;
  --t-2xl:   1.8rem;
  --t-3xl:   2.4rem;
  --t-4xl:   3.5rem;
  --t-hero:  clamp(4.5rem, 10vw, 9rem);
  --t-giant: clamp(6rem, 14vw, 13rem);

  /* ── Spacing ─────────────────────────────────────────────  */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── Radius ──────────────────────────────────────────────  */
  --r-none: 0px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────  */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-brutal: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:    100ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-enter:   700ms;

  /* ── Layout ──────────────────────────────────────────────  */
  --sidebar-w:   260px;
  --max-w:       1400px;
  --hero-h:      100vh;
  --min-hero-h:  600px;
}