/* ============================================
   TOKENS.CSS — Design Tokens & Custom Properties
   Grit'n Grain
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=Sacramento&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  /* ── Shared Brand Colors ── */
  --brand-black: #0D0D0D;
  --brand-dark: #141414;
  --brand-white: #FAFAF7;
  --brand-off-white: #F0EDE8;
  --brand-gold: #C8A96E;
  --brand-gold-light: #D4BA85;
  --brand-gold-dark: #A08550;
  --brand-gray-100: #F5F5F3;
  --brand-gray-200: #E8E6E1;
  --brand-gray-300: #D0CDC6;
  --brand-gray-400: #9E9A92;
  --brand-gray-500: #6E6A62;
  --brand-gray-600: #4A4740;
  --brand-gray-700: #2E2C28;
  --brand-gray-800: #1A1918;
  --brand-danger: #E53935;

  /* ── Grit'n Grain Colors ── */
  --gng-brown: #3B2415;
  --gng-brown-light: #5C3D2E;
  --gng-brown-dark: #2A1A0E;
  --gng-leather: #6B4F3A;
  --gng-green: #2D5A27;
  --gng-green-light: #3D7A35;
  --gng-green-dark: #1E3D1A;
  --gng-field: #1A4D16;
  --gng-cream: #F5F0EB;
  --gng-floodlight: #E8DDD0;
  --gng-highlight: rgba(200, 169, 110, 0.15);
  --gng-glow: rgba(200, 169, 110, 0.4);

  /* ── Grit'n Grain Colors ── */
  --brand-gold: #E91E7B;
  --brand-gold-light: #FF4D9A;
  --brand-gold-dark: #C4156A;
  --brand-gold-light: #E8A87C;
  --brand-cream: #F2D5C0;
  --gng-green: #6B2D6B;
  --gng-green-light: #8B4A8B;
  --gng-green-dark: #4A1E4A;
  --gng-green: #1A7A6D;
  --gng-green-light: #259688;
  --gng-green-dark: #125A50;
  --brand-gold: #F0D060;
  --brand-gold-light: #F7E89A;
  --brand-cream: #F5EDE4;
  --brand-black: #1E1025;
  --brand-gold: #FF6B9D;
  --gng-amber: #C44DFF;
  --gng-green: #6B4DFF;

  /* ── Typography ── */
  --font-display: 'Anton', 'Bebas Neue', sans-serif;
  --font-headline: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Sacramento', cursive;
  --font-condensed: 'Oswald', sans-serif;
  --font-bebas: 'Bebas Neue', sans-serif;

  /* ── Font Sizes (Fluid) ── */
  --fs-hero: clamp(3.5rem, 8vw, 8rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 2vw, 1.75rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.6875rem;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(4rem, 10vw, 8rem);

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-round: 50%;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.24);
  --shadow-glow-gold: 0 0 30px rgba(200, 169, 110, 0.3);
  --shadow-glow-pink: 0 0 30px rgba(233, 30, 123, 0.3);
  --shadow-glow-teal: 0 0 30px rgba(26, 122, 109, 0.3);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
  --duration-theme: 600ms;

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 1000;
  --z-age-gate: 9999;

  /* ── Layout ── */
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-wide: 1600px;
  --nav-height: 80px;
  --nav-height-mobile: 64px;

  /* ── Active Theme (default: neutral) ── */
  --primary: var(--brand-gold);
  --secondary: var(--brand-gray-600);
  --accent: var(--brand-gold);
  --surface: var(--brand-white);
  --surface-alt: var(--brand-off-white);
  --text-primary: var(--brand-black);
  --text-secondary: var(--brand-gray-500);
  --text-on-primary: var(--brand-white);
  --glow-color: var(--shadow-glow-gold);
}

/* ── Grit'n Grain Theme (Light & Saturated Gold Accents) ── */
[data-brand="gritngrain"],
.theme-gritngrain {
  --primary: #3B2415;
  --primary-light: #5C3D2E;
  --secondary: var(--gng-green);
  --secondary-light: var(--gng-green-light);
  --accent: var(--brand-gold);
  --accent-light: var(--brand-gold-light);
  --surface: #FAFAF7;
  --surface-alt: #F4F3EF;
  --surface-dark: #F4F3EF; /* Light chalk-white background */
  --text-primary: #1C1A17; /* Dark text! */
  --text-secondary: #5C554F;
  --text-on-surface: #1C1A17;
  --text-on-primary: var(--brand-white);
  --glow-color: rgba(200, 169, 110, 0.2);
  --btn-primary-bg: var(--gng-green);
  --btn-primary-hover: var(--gng-green-light);
  --btn-secondary-border: var(--brand-gold);
  --btn-secondary-text: var(--brand-gold);
  --card-bg: #FFFFFF;
  --card-border: rgba(200, 169, 110, 0.15);
  --gradient-hero: linear-gradient(135deg, #FAFAF7 0%, #F4F3EF 50%, #EADEC9 100%);
}

/* ── Grit'n Grain Theme (Light Peach-White & Hot Pink BÄM!) ── */
[data-brand="gritngrain"],
.theme-gritngrain {
  --primary: var(--brand-gold);
  --primary-light: var(--brand-gold-light);
  --secondary: var(--gng-green);
  --secondary-light: var(--gng-green-light);
  --accent: var(--brand-gold);
  --accent-light: var(--brand-gold-light);
  --surface: #FAFAF7;
  --surface-alt: #FFF5F2;
  --surface-dark: #FFF7F4; /* Light peach-white background */
  --text-primary: #1D0E22; /* Deep dark purple text! */
  --text-secondary: #8B2D8B;
  --text-on-surface: #1D0E22;
  --text-on-primary: var(--brand-white);
  --glow-color: rgba(233, 30, 123, 0.2);
  --btn-primary-bg: var(--brand-gold);
  --btn-primary-hover: var(--brand-gold-light);
  --btn-secondary-border: var(--brand-gold);
  --btn-secondary-text: var(--brand-gold);
  --card-bg: #FFFFFF;
  --card-border: rgba(233, 30, 123, 0.12);
  --gradient-hero: linear-gradient(135deg, #FFF8F6 0%, #FFE5EE 50%, #FFF9E5 100%);
}