/* ==========================================================================
   VR Celebrations — Design Tokens
   File: assets/css/variables.css
   All raw values live here. Components must reference tokens only.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     Brand Palette
     -------------------------------------------------------------------- */
  --color-primary:        #E29430;   /* celebration gold */
  --color-primary-dark:   #C97B15;
  --color-primary-darker: #A96208;
  --color-primary-light:  #F3C87E;
  --color-primary-soft:   #FBEEDA;

  --color-accent:         #E91E8C;   /* celebration magenta */
  --color-accent-dark:    #C21273;
  --color-accent-light:   #F877BE;
  --color-accent-soft:    #FDE7F3;

  --color-purple:         #8B2FC9;
  --color-purple-dark:    #5E1E8F;
  --color-purple-light:   #B575E4;
  --color-purple-soft:    #F4E9FC;

  /* --------------------------------------------------------------------
     Gradients
     -------------------------------------------------------------------- */
  --gradient-gold:        linear-gradient(135deg, #F0B14B 0%, #D9861A 100%);
  --gradient-gold-hover:  linear-gradient(135deg, #E8A238 0%, #C97B15 100%);
  --gradient-celebration: linear-gradient(135deg, #E91E8C 0%, #8B2FC9 100%);
  --gradient-celebration-hover: linear-gradient(135deg, #C21273 0%, #6F25A3 100%);
  --gradient-blush:       linear-gradient(135deg, #FDE7F3 0%, #F4E9FC 100%);
  --gradient-hero-veil:   linear-gradient(180deg, rgba(46, 26, 51, 0) 0%, rgba(46, 26, 51, 0.55) 100%);
  --gradient-media-fallback: linear-gradient(135deg, #3D1440 0%, #7A1E62 45%, #C2497B 100%);

  /* --------------------------------------------------------------------
     Surfaces & Borders
     -------------------------------------------------------------------- */
  --color-bg:             #FFF9F1;   /* warm cream page background */
  --color-bg-alt:         #FFF3E6;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-tint:   #FFFBF6;
  --color-footer-bg:      #2A142F;   /* deep plum */
  --color-footer-surface: #38203E;

  --color-border:         #F1E3D2;
  --color-border-strong:  #E4CFB4;
  --color-border-focus:   var(--color-primary);

  /* --------------------------------------------------------------------
     Text
     -------------------------------------------------------------------- */
  --color-text:           #2E1A33;
  --color-text-secondary: #5C4B63;
  --color-text-muted:     #8A7A91;
  --color-text-invert:    #FFFFFF;
  --color-text-invert-muted: rgba(255, 255, 255, 0.72);
  --color-link:           var(--color-primary-dark);
  --color-link-hover:     var(--color-primary-darker);

  /* --------------------------------------------------------------------
     Feedback States
     -------------------------------------------------------------------- */
  --color-success:        #1F9D55;
  --color-success-soft:   #E4F6EC;
  --color-warning:        #E9A23B;
  --color-warning-soft:   #FCF1DE;
  --color-danger:         #D64545;
  --color-danger-soft:    #FBE9E9;
  --color-info:           #3172D6;
  --color-info-soft:      #E8F0FC;

  /* --------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */
  --font-body:    "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", "Georgia", serif;
  --font-script:  "Great Vibes", "Brush Script MT", cursive;

  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.80rem + 0.12vw, 0.88rem);
  --fs-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.00rem);
  --fs-md:   clamp(1.05rem, 1.00rem + 0.25vw, 1.15rem);
  --fs-lg:   clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem);
  --fs-xl:   clamp(1.45rem, 1.30rem + 0.75vw, 1.85rem);
  --fs-2xl:  clamp(1.80rem, 1.55rem + 1.25vw, 2.45rem);
  --fs-3xl:  clamp(2.20rem, 1.80rem + 2.00vw, 3.25rem);
  --fs-hero-script: clamp(2.60rem, 2.10rem + 2.50vw, 3.90rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-wide:   0.08em;

  /* --------------------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------------------- */
  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  --section-padding-y: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  --section-gap:       clamp(1.25rem, 1rem + 1.5vw, 2rem);

  /* --------------------------------------------------------------------
     Radius
     -------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------- */
  --shadow-xs:  0 1px 3px rgba(46, 26, 51, 0.06);
  --shadow-sm:  0 3px 10px rgba(46, 26, 51, 0.08);
  --shadow-md:  0 8px 24px rgba(46, 26, 51, 0.10);
  --shadow-lg:  0 16px 44px rgba(46, 26, 51, 0.14);
  --shadow-gold: 0 8px 22px rgba(217, 134, 26, 0.32);
  --shadow-accent: 0 8px 22px rgba(233, 30, 140, 0.28);

  /* --------------------------------------------------------------------
     Glass Effect
     -------------------------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur:   14px;

  /* --------------------------------------------------------------------
     Motion
     -------------------------------------------------------------------- */
  --transition-fast:   160ms ease;
  --transition-base:   260ms ease;
  --transition-slow:   420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-spring: 320ms cubic-bezier(0.34, 1.36, 0.64, 1);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */
  --container-max:    1200px;
  --container-wide:   1320px;
  --container-narrow: 860px;
  --container-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --header-height:        76px;
  --header-height-scrolled: 64px;

  /* --------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:  100;
  --z-header:  500;
  --z-dropdown: 600;
  --z-overlay: 900;
  --z-modal:  1000;
  --z-toast:  1100;
}