/* ========================================================================
   variables.css — DESIGN TOKENS
   Videos From Santa – Holiday 2025
   ======================================================================== */

:root {

  /* ============================================================
     PRIMARY BRAND COLORS
     ============================================================ */

  /* CTA (Holiday Red) - PRIMARY ACTION COLOR */
  --cta-light: #fce8e8;
  --cta: #b71f22;
  --cta-medium: #d84345;
  --cta-dark: #97191c;
  --cta-darker: #6f0f11;

  /* Success (Deep Green) */
  --success-light: #e5f2ea;
  --success: #2a6246;
  --success-medium: #3f7a5b;
  --success-dark: #224e37;
  --success-darker: #163727;

  /* Accent (Sea Green) */
  --accent-light: #e6f4ef;
  --accent: #369e6a;
  --accent-medium: #49b47d;
  --accent-dark: #2a7d52;
  --accent-darker: #1e5a3a;

  /* Gold (Premium / Savings / Badges) */
  --gold-light: #fff4da;
  --gold: #e8a726;
  --gold-medium: #f1bd4e;
  --gold-dark: #c48a1d;
  --gold-darker: #8d6012;

  /* Warning */
  --warning-light: #fff6e5;
  --warning: #f3a53d;
  --warning-medium: #e0872b;
  --warning-dark: #b9681f;

  /* Info (Blue) */
  --info-light: #ecf4ff;
  --info: #3d7bf3;
  --info-medium: #2f64c9;
  --info-dark: #244a90;

  /* Indigo (Holiday Magic Accent) */
  --indigo-light: #eef2ff;
  --indigo: #5559e8;
  --indigo-medium: #6f74f5;
  --indigo-dark: #4341d5;
  --indigo-darker: #2d2eb2;


  /* ============================================================
     NEUTRALS / TEXT / BACKGROUNDS
     ============================================================ */

  --white: #ffffff;
  --black: #000000;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #1a1a2e;

  --bg-page: #f5f5f7;
  --bg-card: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-dark: #1B1E3C;
  --bg-hero: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);

  --text-dark: #1a1a2e;
  --text-body: #374151;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;
  --text-heading: #2B2D42;


  /* ============================================================
     BORDERS / RADIUS / SHADOWS
     ============================================================ */

  --border-color: #e2e8f0;
  --border-light: #f3f4f6;
  --border-dark: #334155;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-cta: 0 4px 16px rgba(183, 31, 34, 0.35);
  --shadow-cta-hover: 0 6px 24px rgba(183, 31, 34, 0.45);
  --shadow-success: 0 4px 20px rgba(42, 98, 70, 0.25);
  --shadow-gold: 0 4px 16px rgba(232, 167, 38, 0.3);

  /* ============================================================
     SEMANTIC COLOR MAPPING (Button & Badge System)
     ============================================================ */

  /* Primary Buttons */
  --btn-primary: var(--cta);              /* Red - Main CTAs */
  --btn-primary-hover: var(--cta-dark);

  --btn-secondary: var(--success);        /* Green - Safe/Continue */
  --btn-secondary-hover: var(--success-dark);

  --btn-premium: var(--gold);             /* Gold - Premium upsells */
  --btn-premium-hover: var(--gold-dark);

  /* Badge System */
  --badge-included: var(--success);       /* Green - Included/Default */
  --badge-recommended: var(--cta);        /* Red - Recommended/Upgrade */
  --badge-premium: var(--gold);           /* Gold - Most Magical/Best Value */


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Nunito', 'Inter', system-ui, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.25rem;    /* 36px */
  --font-size-4xl: 3rem;       /* 48px */
  --font-size-5xl: 3.75rem;    /* 60px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;


  /* ============================================================
     SPACING
     ============================================================ */

  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */


  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);


  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-notification: 800;
}