/* =========================================================
   MAGO CLUB — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   ========================================================= */

:root {
  /* ---------- Color ---------- */
  --mago-stage:        #1C140D;   /* primary background — espresso */
  --mago-stage-2:      #261B12;   /* slightly lifted dark surface */
  --mago-stage-3:      #100A06;   /* near-black, used sparingly */

  --mago-cream:        #FBF4E4;   /* primary cream surface */
  --mago-cream-2:      #F2EAD8;   /* text on dark / secondary cream */
  --mago-cream-3:      #E8DEC6;   /* hairline on cream */

  --mago-ink:          #2A1F15;   /* primary text on cream */
  --mago-ink-muted:    #7A6B5A;   /* metadata, captions */

  --mago-copper:       #B8794A;   /* accent — line, underline, arrow */
  --mago-copper-soft:  #6B4A30;   /* hover / pressed accent */

  --mago-hairline-copper:  rgba(184, 121, 74, 0.35);
  --mago-hairline-cream:   rgba(242, 234, 216, 0.18);

  /* ---------- Typography ---------- */
  --font-serif: "Fraunces", "Times New Roman", serif;
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Fraunces variation axes — high contrast, generous */
  --serif-opsz-display: 144;
  --serif-opsz-text: 28;
  --serif-soft: 30;          /* SOFT axis — slight, never floppy */

  /* Type scale — desktop. Mobile overrides further down. */
  --fs-display-xl: clamp(4rem, 9vw, 7.5rem);    /* 64–120px */
  --fs-display-l:  clamp(3rem, 6vw, 5rem);      /* 48–80px  */
  --fs-display-m:  clamp(2.25rem, 4.5vw, 3.5rem); /* 36–56px */
  --fs-h1:         clamp(1.75rem, 3vw, 2.5rem); /* 28–40px */
  --fs-h2:         clamp(1.375rem, 2vw, 1.75rem); /* 22–28px */
  --fs-body-l:     1.25rem;   /* 20px */
  --fs-body:       1rem;      /* 16px */
  --fs-body-s:     0.875rem;  /* 14px */
  --fs-label:      0.75rem;   /* 12px */

  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.65;
  --lh-tight:      1.25;

  --ls-label:      0.14em;    /* generous tracking on small caps */
  --ls-tight:      -0.02em;   /* display tightening */

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  5rem;      /* 80px */
  --space-10: 7.5rem;    /* 120px */

  /* ---------- Layout ---------- */
  --radius-card:    24px;
  --radius-pill:    999px;
  --radius-input:   0;        /* underline-only inputs, no rounding */

  --hairline:       1px;
  --container-max:  1440px;
  --gutter:         clamp(1.5rem, 5vw, 7.5rem);

  /* ---------- Motion ---------- */
  --ease-considered: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    600ms;
  --dur-base:    1200ms;
  --dur-slow:    2000ms;

  /* Scroll/load reveal — slow, languid, considered. */
  --dur-reveal:       3200ms;
  --dur-reveal-long:  4000ms;
  --reveal-distance:  28px;
  --reveal-stagger:   180ms;
  --reveal-kenburns:  8000ms;
  --ease-reveal:      cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Elevation (used sparingly) ---------- */
  --shadow-card: 0 24px 48px -24px rgba(28, 20, 13, 0.35);
}

/* Mobile: scale display down. Body stays. */
@media (max-width: 720px) {
  :root {
    --fs-display-xl: clamp(3rem, 12vw, 4.5rem);
    --fs-display-l:  clamp(2.25rem, 9vw, 3.25rem);
    --fs-display-m:  clamp(1.875rem, 6.5vw, 2.5rem);
  }
}