/* ============================================
   SEAMLESS EDGE — ROOT CSS VARIABLES
   Brand: Midnight · Electric Blue · Lavender Purple · Soft Pink
   Palette: #020617 · #2563EB · #8B5CF6 · #F472B6
   ============================================ */

:root {
  /* ==================== PRIMARY BRAND COLORS ==================== */
  --primary-midnight: #020617;      /* Deep midnight — main dark bg */
  --primary-blue: #2563EB;          /* Electric blue — primary action */
  --primary-purple: #8B5CF6;        /* Soft lavender purple — highlights */
  --primary-pink: #F472B6;          /* Soft pink — feminine accent */
  --primary-gray: #E5E7EB;          /* Light gray — surfaces & borders */
  --primary-white: #ffffff;         /* Pure white */

  /* ==================== SEMANTIC ACCENTS ==================== */
  --accent-primary: var(--pink-500);
  --accent-secondary: var(--purple-500);

  /* ==================== MIDNIGHT SCALE ==================== */
  --midnight-950: #020617;          /* Darkest — hero & footer bg */
  --midnight-900: #040c22;          /* Very dark navy */
  --midnight-800: #071030;          /* Dark navy */
  --midnight-700: #0c1a45;          /* Rich navy */
  --midnight-600: #112054;          /* Mid navy */
  --midnight-500: #1a2f6b;          /* Lighter navy */

  /* ==================== ELECTRIC BLUE SCALE ==================== */
  --blue-950: #0a1a4a;              /* Near-black blue */
  --blue-900: #0d2475;              /* Deep blue */
  --blue-800: #1240b8;              /* Dark electric blue */
  --blue-700: #1a52d4;              /* Medium blue */
  --blue-600: #2060e8;              /* Standard electric blue */
  --blue-500: #2563EB;              /* PRIMARY electric blue */
  --blue-400: #3b7bf0;              /* Lighter blue */
  --blue-300: #60a0f8;              /* Light blue */
  --blue-200: #93c5fd;              /* Pale blue */
  --blue-100: #dbeafe;              /* Very pale blue */
  --blue-50:  #eff6ff;              /* Near-white blue tint */

  /* ==================== PURPLE SCALE (LAVENDER SHIFT) ==================== */
  --purple-950: #2e1065;            /* Deepest lavender */
  --purple-900: #4c1d95;            /* Very dark lavender */
  --purple-800: #5b21b6;            /* Dark lavender */
  --purple-700: #6d28d9;            /* Rich lavender */
  --purple-600: #7c3aed;            /* Medium lavender */
  --purple-500: #8b5cf6;            /* PRIMARY lavender accent */
  --purple-400: #a78bfa;            /* Lighter lavender */
  --purple-300: #c4b5fd;            /* Soft lavender */
  --purple-200: #ddd6fe;            /* Pale lavender */
  --purple-100: #ede9fe;            /* Very pale lavender */
  --purple-50:  #f5f3ff;            /* Near-white lavender tint */

  /* ==================== SOFT PINK SCALE (FEMININE TOUCH) ==================== */
  --pink-950: #831843;              /* Deepest pink */
  --pink-900: #be185d;              /* Very dark pink */
  --pink-800: #9d174d;              /* Dark pink */
  --pink-700: #be185d;              /* Rich pink */
  --pink-600: #db2777;              /* Medium pink */
  --pink-500: #F472B6;              /* PRIMARY pink accent */
  --pink-400: #f9a8d4;              /* Lighter pink */
  --pink-300: #FBCFE8;              /* Soft pink */
  --pink-200: #fce7f3;              /* Pale pink */
  --pink-100: #FDF2F8;              /* Very pale pink */
  --pink-50:  #fdf2f8;              /* Near-white pink tint */

  /* ==================== PREMIUM GOLD SCALE ==================== */
  --gold-950: #42320b;              /* Deepest gold */
  --gold-900: #715512;              /* Very dark gold */
  --gold-800: #8c6a16;              /* Dark gold */
  --gold-700: #b4891d;              /* Rich gold */
  --gold-600: #c79a22;              /* Medium gold */
  --gold-500: #D4AF37;              /* PRIMARY premium gold */
  --gold-400: #e3c45e;              /* Lighter gold */
  --gold-300: #F5E6A9;              /* Soft gold */
  --gold-200: #f8efc6;              /* Pale gold */
  --gold-100: #fbf5e2;              /* Very pale gold */
  --gold-50:  #fdfcf4;              /* Near-white gold tint */

  /* ==================== INK / NEUTRAL SCALE ==================== */
  --obsidian:  #020617;             /* True dark mapped to midnight */
  --ink-900:   #0f172a;             /* Near black with blue tint */
  --ink-800:   #1e293b;             /* Very dark slate */
  --ink-700:   #334155;             /* Dark slate */
  --ink-600:   #475569;             /* Mid slate */
  --ink-500:   #64748b;             /* Slate */
  --ink-400:   #94a3b8;             /* Light slate */
  --ink-300:   #cbd5e1;             /* Pale slate */
  --ink-200:   #e2e8f0;             /* Very pale slate */
  --ink-100:   #f1f5f9;             /* Near white slate */
  --ink-50:    #f8fafc;             /* Off white */
  --white:     #ffffff;

  /* ==================== LIGHT GRAY SYSTEM ==================== */
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;             /* PRIMARY light gray */
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;

  /* ==================== SEMANTIC COLORS ==================== */
  --success: #10b981;               /* Emerald green */
  --warning: #f59e0b;               /* Amber */
  --error:   #ef4444;               /* Red */
  --info:    #3b82f6;               /* Blue info */

  /* ==================== GLOWS ==================== */
  --glow-blue-xs: 0 0 8px rgba(37,99,235,.30);
  --glow-blue-sm: 0 0 16px rgba(37,99,235,.40);
  --glow-blue:    0 0 28px rgba(37,99,235,.45), 0 0 60px rgba(37,99,235,.25);
  --glow-blue-lg: 0 0 50px rgba(37,99,235,.55), 0 0 100px rgba(37,99,235,.30);
  
  --glow-purple-xs: 0 0 8px rgba(139,92,246,.30);
  --glow-purple-sm: 0 0 16px rgba(139,92,246,.40);
  --glow-purple:    0 0 28px rgba(139,92,246,.45), 0 0 60px rgba(139,92,246,.25);

  --glow-pink-xs: 0 0 8px rgba(244,114,182,.30);
  --glow-pink-sm: 0 0 16px rgba(244,114,182,.40);
  --glow-pink:    0 0 28px rgba(244,114,182,.35), 0 0 60px rgba(244,114,182,.15);

  /* ── Legacy aliases for backward HTML compatibility ── */
  --glow-gold-xs: var(--glow-blue-xs);
  --glow-gold-sm: var(--glow-blue-sm);
  --glow-gold:    var(--glow-blue);
  --glow-gold-lg: var(--glow-blue-lg);
  --glow-green:   var(--glow-purple-sm);

  /* ==================== SHADOWS ==================== */
  --sh-xs: 0 1px 4px rgba(2,6,23,.10);
  --sh-sm: 0 2px 12px rgba(2,6,23,.14);
  --sh-md: 0 8px 32px rgba(2,6,23,.18);
  --sh-lg: 0 18px 50px rgba(2,6,23,.24);
  --sh-xl: 0 28px 80px rgba(2,6,23,.34);
  --sh-blue:   0 6px 28px rgba(37,99,235,.38), 0 2px 8px rgba(37,99,235,.20);
  --sh-purple: 0 6px 28px rgba(139,92,246,.32), 0 2px 8px rgba(139,92,246,.16);
  --sh-pink:   0 6px 28px rgba(244,114,182,.32), 0 2px 8px rgba(244,114,182,.16);

  /* ── Legacy shadow aliases ── */
  --sh-gold: var(--sh-blue);

  /* ==================== GRADIENTS ==================== */
  /* Dark background: deep midnight → navy */
  --g-dark:  linear-gradient(150deg, #020617 0%, #040c22 35%, #071030 70%, #0c1a45 100%);

  /* Primary action: electric blue → deep blue */
  --g-blue:  linear-gradient(130deg, #60a0f8 0%, #2563EB 45%, #1240b8 100%);

  /* Accent gradient: purple → electric blue */
  --g-purple: linear-gradient(130deg, #a78bfa 0%, #8b5cf6 50%, #2563EB 100%);

  /* Feminine premium gradient: purple → pink → blue */
  --g-feminine: linear-gradient(135deg, var(--purple-400) 0%, var(--pink-500) 50%, var(--blue-500) 100%);

  /* Soft subtle glow gradient: pink → purple */
  --g-soft: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(139,92,246,0.1) 100%);

  /* Hero background: premium midnight depth */
  --g-hero:  linear-gradient(150deg, #020617 0%, #040c22 30%, #071030 65%, #0c1a45 100%);

  /* CTA section: vibrant electric blue to purple fusion */
  --g-cta:   linear-gradient(135deg, #2563EB 0%, #1a52d4 40%, #7c3aed 75%, #8b5cf6 100%);

  /* Legacy aliases mapping */
  --g-gold:  var(--g-blue);

  /* ==================== TYPOGRAPHY ==================== */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* ==================== SPACING ==================== */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem;
  --s16:4rem; --s20:5rem; --s24:6rem;

  /* ==================== BORDER RADIUS ==================== */
  --r-xs:3px; --r-sm:5px; --r:8px; --r-md:12px;
  --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* ==================== EASING ==================== */
  --e:260ms cubic-bezier(.25,.46,.45,.94);
  --e-fast:150ms ease;
  --e-slow:500ms cubic-bezier(.25,.46,.45,.94);

  /* ==================== LAYOUT ==================== */
  --max-w: 1260px;
  --z-nav:1000; --z-mob:2000; --z-ov:1999;

  /* ==================== LEGACY COLOR ALIASES ==================== */
  /* Keeps all existing PHP/HTML that uses forest- and gold- tokens working seamlessly */
  --forest-950: var(--midnight-950);
  --forest-900: var(--midnight-900);
  --forest-800: var(--midnight-800);
  --forest-700: var(--midnight-700);
  --forest-600: var(--midnight-600);
  --forest-500: var(--midnight-500);

  /* Legacy mapping modified slightly to point directly to true colors where applicable */
  --gold-950: var(--blue-950);
  --gold-800: var(--blue-800);
  --gold-700: var(--blue-700);
  --gold-600: var(--blue-600);
  --gold-500: var(--blue-500);    /* Primary action mapping remains blue for consistency */
  --gold-400: var(--blue-400);
  --gold-300: var(--blue-300);
  --gold-200: var(--blue-200);
  --gold-100: var(--blue-100);
  --gold-50:  var(--blue-50);

  /* ==================== BACKGROUND SEMANTICS ==================== */
  --bg-primary:       var(--primary-blue);
  --bg-secondary:     var(--midnight-800);
  --bg-dark:          var(--primary-midnight);
  --bg-light:         var(--primary-gray);
  --bg-white:         var(--primary-white);
  --bg-blue-gradient: var(--g-blue);
  --bg-hero-gradient: var(--g-hero);
  --bg-dark-gradient: var(--g-dark);
  --bg-soft-gradient: var(--g-soft);

  /* ==================== TEXT SEMANTICS ==================== */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-light:     var(--ink-500);
  --text-white:     var(--primary-white);
  --text-blue:      var(--primary-blue);
  --text-purple:    var(--primary-purple);
  --text-pink:      var(--primary-pink);

  /* ==================== BORDERS ==================== */
  --border-light:  var(--gray-200);
  --border-medium: var(--gray-300);
  --border-dark:   var(--gray-600);
  --border-blue:   var(--primary-blue);
  --border-purple: var(--primary-purple);
  --border-pink:   var(--primary-pink);

  /* ==================== INPUT FOCUS ==================== */
  --input-focus-shadow: 0 0 0 3px rgba(37,99,235,.20);

  /* ==================== HEADER ==================== */
  --header-height: 80px;
  --header-bg:     var(--primary-midnight);

  /* ==================== BLUE ALPHA VARIANTS ==================== */
  --blue-10: rgba(37,99,235,.10);
  --blue-20: rgba(37,99,235,.20);
  --blue-30: rgba(37,99,235,.30);
  --blue-50a: rgba(37,99,235,.50);
  --blue-70: rgba(37,99,235,.70);

  /* ==================== PURPLE ALPHA VARIANTS ==================== */
  --purple-10: rgba(139,92,246,.10);
  --purple-20: rgba(139,92,246,.20);
  --purple-30: rgba(139,92,246,.30);
  --purple-50a: rgba(139,92,246,.50);
  --purple-70: rgba(139,92,246,.70);

  /* ==================== PINK ALPHA VARIANTS ==================== */
  --pink-10: rgba(244,114,182,.10);
  --pink-20: rgba(244,114,182,.20);
  --pink-30: rgba(244,114,182,.30);
  --pink-50a: rgba(244,114,182,.50);
  --pink-70: rgba(244,114,182,.70);

  /* ==================== OVERLAY COLORS ==================== */
  --overlay-light:    rgba(255,255,255,.90);
  --overlay-medium:   rgba(2,6,23,.50);
  --overlay-dark:     rgba(2,6,23,.75);
  --overlay-blue:     rgba(37,99,235,.15);
  --overlay-purple:   rgba(139,92,246,.12);
  --overlay-pink:     rgba(244,114,182,.12);
  --overlay-black:    rgba(2,6,23,.88);
}

/* ==================== DARK MODE ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light:       var(--ink-800);
    --text-primary:   var(--ink-100);
    --text-secondary: var(--ink-300);
    --border-light:   var(--ink-700);
  }
}

/* ==================== UTILITY CLASSES ==================== */
.text-blue      { color: var(--primary-blue); }
.text-purple    { color: var(--primary-purple); }
.text-pink      { color: var(--primary-pink); }
.text-white     { color: var(--white) !important; }
.text-muted     { color: var(--ink-400) !important; }
.bg-blue        { background-color: var(--primary-blue); }
.bg-purple      { background-color: var(--primary-purple); }
.bg-pink        { background-color: var(--primary-pink); }
.bg-midnight    { background-color: var(--primary-midnight); }
.bg-blue-gradient  { background: var(--g-blue); }
.bg-purple-gradient { background: var(--g-purple); }
.bg-feminine-gradient { background: var(--g-feminine); }
.bg-hero-gradient  { background: var(--g-hero); }
.shadow-blue    { box-shadow: var(--sh-blue); }
.shadow-purple  { box-shadow: var(--sh-purple); }
.shadow-pink    { box-shadow: var(--sh-pink); }

/* Legacy utility aliases */
.text-gold      { color: var(--primary-blue) !important; }
.text-green     { color: var(--primary-purple) !important; }
.bg-gold        { background-color: var(--primary-blue); }
.bg-green       { background-color: var(--primary-purple); }
.shadow-gold    { box-shadow: var(--sh-blue); }
.shadow-green   { box-shadow: var(--sh-purple); }