/* ==========================================================================
   Gugudde TV — Design Tokens
   Primitive + semantic custom properties. Every color, spacing, radius,
   shadow, and type value used across the site is defined here — nothing
   else ships a raw hex/px value outside this file.
   ========================================================================== */

:root {
  /* ---- Purple (primary) ---- */
  --purple-900: #3D0A47;
  --purple-700: #5B0F6E;
  --purple-600: #750C84; /* primary brand purple */
  --purple-500: #8B1D9C;
  --purple-400: #A445B3;
  --purple-100: #F3E6F7;

  /* ---- Gold (accent) ---- */
  --gold-600: #946000; /* deep gold — WCAG AA text-safe on white (5.3:1); #E8951F only passed 2.4:1 */
  --gold-500: #FFB443; /* primary brand gold */
  --gold-300: #FFD37A;
  --gold-100: #FFF4E0;

  /* ---- Navy (secondary) ---- */
  --navy-700: #101B3D;
  --navy-600: #16224A;
  --navy-500: #1E2E5C;
  --navy-300: #48568A;

  /* ---- Neutrals ---- */
  --ink-900: #1A1220;
  --white: #FFFFFF;
  --cream-50: #FBF7F2;
  --gray-200: #E7E2E9;
  --gray-300: #D6D0DA;
  --gray-400: #B3ABBB;
  --gray-500: #8B8393;
  --gray-600: #675F70;

  /* ---- Semantic ---- */
  --color-primary: var(--purple-600);
  --color-primary-dark: var(--purple-700);
  --color-primary-light: var(--purple-500);
  --color-on-primary: var(--white);

  --color-accent: var(--gold-500);
  --color-accent-dark: var(--gold-600);
  --color-on-accent: var(--ink-900);

  --color-secondary: var(--navy-700);
  --color-on-secondary: var(--white);

  --color-bg: var(--white);
  --color-bg-alt: var(--cream-50);
  --color-bg-tint: var(--purple-100);
  --color-bg-dark: var(--navy-700);

  --color-text: var(--ink-900);
  --color-text-muted: var(--gray-600);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-muted: var(--gray-300);

  --color-border: var(--gray-200);
  --color-border-dark: rgba(255, 255, 255, 0.12);

  --gradient-brand: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-700) 100%);
  --gradient-brand-radial: radial-gradient(120% 120% at 20% 10%, var(--purple-500) 0%, var(--purple-700) 55%, var(--purple-900) 100%);

  /* ---- Typography ---- */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-lg: 1.125rem;
  --fs-h6: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-h5: clamp(1.15rem, 1.1rem + 0.25vw, 1.375rem);
  --fs-h4: clamp(1.375rem, 1.3rem + 0.4vw, 1.75rem);
  --fs-h3: clamp(1.65rem, 1.5rem + 0.75vw, 2.25rem);
  --fs-h2: clamp(2rem, 1.7rem + 1.3vw, 3rem);
  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --fs-hero: clamp(2.75rem, 1.9rem + 3.8vw, 5.5rem);

  --lh-body: 1.65;
  --lh-heading: 1.15;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 3vw, 3rem);

  /* ---- Radius / shadow ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(26, 18, 32, 0.08);
  --shadow-md: 0 10px 30px rgba(61, 10, 71, 0.14);
  --shadow-lg: 0 24px 60px rgba(61, 10, 71, 0.22);
  --shadow-gold: 0 10px 24px rgba(232, 149, 31, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-drawer: 110;
  --z-modal: 120;
  --z-toast: 130;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}