/* ============================================================
   MEXHICKENS — Design Tokens
   All custom properties. No rules, only variables.
   ============================================================ */

:root {
  /* ─── Brand jewel tones (same in both themes) ─── */
  --color-teal:        #0ABFBC;
  --color-teal-deep:   #068789;
  --color-gold:        #F5A623;
  --color-gold-deep:   #C47D0E;
  --color-magenta:     #E91E8C;
  --color-magenta-deep:#B5166C;
  --color-purple:      #7B2D8B;
  --color-coral:       #F26A4F;
  --color-silver:      #9BB4C2;

  /* ─── Medal colors ─── */
  --medal-gold:        #F5A623;
  --medal-gold-glow:   rgba(245, 166, 35, 0.5);
  --medal-silver:      #9BB4C2;
  --medal-silver-glow: rgba(155, 180, 194, 0.5);
  --medal-bronze:      #C4693A;
  --medal-bronze-glow: rgba(196, 105, 58, 0.5);

  /* ─── Typography ─── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ─── Type scale ─── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ─── Border radii ─── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ─── Motion ─── */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-med:     300ms;
  --dur-slow:    600ms;

  /* ─── Shadows ─── */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md:           0 4px 24px rgba(0, 0, 0, 0.18);
  --shadow-lg:           0 8px 48px rgba(0, 0, 0, 0.28);
  --shadow-glow-teal:    0 0 32px rgba(10, 191, 188, 0.4);
  --shadow-glow-gold:    0 0 32px rgba(245, 166, 35, 0.5);
  --shadow-glow-magenta: 0 0 32px rgba(233, 30, 140, 0.4);

  /* ─── Layout ─── */
  --nav-height:      60px;
  --content-max:     800px;
  --content-wide:    1200px;
}