/* ====================================================================
   VSAA PREMIUM THEME — Navy Blue + Gold Luxury System
   V-SAT Solutions Design System 2026
==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=Cinzel:wght@400;500;600;700&display=swap');

:root {
  /* ── BRAND COLORS ───────────────────────────────── */
  --navy-900: #050D1A;
  --navy-800: #081430;
  --navy-700: #0F1F4B;
  --navy-600: #122549;
  --navy-500: #1A3260;
  --navy-400: #234285;
  --navy-300: #2E56AD;
  --navy-200: #5B82CB;
  --navy-100: #A8BFEC;
  --navy-50:  #E8EEF9;

  --gold-dark:  #8B6914;
  --gold-hover: #B8922A;
  --gold-main:  #C9A646;
  --gold-mid:   #D4B55A;
  --gold-light: #E5C97A;
  --gold-pale:  #F5E8B8;
  --gold-glow:  rgba(201,166,70,0.35);
  --gold-glow-strong: rgba(201,166,70,0.55);

  /* ── LIGHT THEME — SEMANTIC COLORS ─────────────── */
  --bg-primary:   #F7F8FB;
  --bg-secondary: #F2F4F8;
  --bg-section:   #FFFFFF;
  --bg-dark:      #070F1E;
  --bg-card:      #FFFFFF;
  --bg-card-warm: #FEFCF8;
  --bg-soft:      #EEF2F8;

  --text-primary:   #0F1F4B;
  --text-secondary: #2C3550;
  --text-body:      #4B5568;
  --text-muted:     #6B7280;
  --text-light:     #8A93A5;
  --text-inverse:   #F5F0E8;

  --border-light: #E6EAF1;
  --border-mid:   rgba(201,166,70,0.35);
  --border-gold:  rgba(201,166,70,0.55);
  --border-soft:  #DDE3EE;

  /* ── GRADIENTS ──────────────────────────────────── */
  --grad-gold:     linear-gradient(135deg, #C9A646 0%, #E5C97A 50%, #C9A646 100%);
  --grad-gold-v:   linear-gradient(180deg, #E5C97A 0%, #C9A646 100%);
  --grad-navy:     linear-gradient(135deg, #070F1E 0%, #0D1E3A 50%, #122549 100%);
  --grad-navy-r:   linear-gradient(135deg, #122549 0%, #0D1E3A 100%);
  --grad-hero:     linear-gradient(135deg, #F9FAFC 0%, #EEF2F8 100%);
  --grad-section:  linear-gradient(180deg, #F7F8FB 0%, #F2F4F8 100%);
  --grad-card:     linear-gradient(145deg, #FFFFFF 0%, #F9FAFC 100%);
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  --grad-software: linear-gradient(180deg, #F6F7FB 0%, #EEF2F8 100%);

  /* ── GLASS EFFECTS (light) ──────────────────────── */
  --glass-light:   rgba(255,255,255,0.75);
  --glass-mid:     rgba(255,255,255,0.85);
  --glass-strong:  rgba(255,255,255,0.95);
  --glass-card:    rgba(255,255,255,0.7);
  --glass-border:  rgba(230,234,241,0.9);

  /* ── TYPOGRAPHY ─────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-accent:  'Cinzel', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-heading: 'Cormorant Garamond', serif;
  --font-mono:    'Fira Code', monospace;

  --size-xs:   0.72rem;
  --size-sm:   0.85rem;
  --size-base: 1rem;
  --size-md:   1.1rem;
  --size-lg:   1.25rem;
  --size-xl:   1.5rem;
  --size-2xl:  1.875rem;
  --size-3xl:  2.25rem;
  --size-4xl:  3rem;
  --size-5xl:  3.75rem;
  --size-6xl:  4.5rem;
  --size-7xl:  5.5rem;

  /* legacy compat */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem;
  --weight-light: 300; --weight-normal: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* ── SHADOWS ────────────────────────────────────── */
  --shadow-xs:   0 1px 4px rgba(5,13,26,0.06);
  --shadow-sm:   0 2px 10px rgba(5,13,26,0.08);
  --shadow-md:   0 6px 24px rgba(5,13,26,0.10);
  --shadow-lg:   0 12px 40px rgba(5,13,26,0.14);
  --shadow-xl:   0 20px 60px rgba(5,13,26,0.18);
  --shadow-2xl:  0 32px 80px rgba(5,13,26,0.22);
  --shadow-gold: 0 8px 32px rgba(201,166,70,0.25);
  --shadow-gold-hover: 0 12px 48px rgba(201,166,70,0.45);
  --shadow-navy: 0 8px 32px rgba(9,20,40,0.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── BORDER RADIUS ──────────────────────────────── */
  --r-xs:   4px;  --r-sm:  8px;  --r-md:  12px;
  --r-lg:   16px; --r-xl:  24px; --r-2xl: 32px;
  --r-3xl:  40px; --r-full: 9999px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;

  /* ── SPACING ────────────────────────────────────── */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;   --section-y: 6rem;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --section-padding-y: 5rem; --section-padding-x: 1.5rem;

  /* ── ANIMATIONS ─────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --dur-fast: 0.18s; --dur-mid: 0.32s; --dur-slow: 0.55s; --dur-slower: 0.85s;
  --anim-speed-fast: 0.2s; --anim-speed-normal: 0.3s;
  --anim-speed-medium: 0.5s; --anim-speed-slow: 0.8s; --anim-speed-slower: 1.2s;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── MISC ───────────────────────────────────────── */
  --blur-sm: blur(4px); --blur-md: blur(10px);
  --blur-lg: blur(20px); --blur-xl: blur(32px);
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200;
  --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500;
  --container-xl: 1280px; --container-2xl: 1400px;
  --cream-bg: #F7F8FB; --white: #FFFFFF;
  --dark-text: #0F1F4B; --secondary-text: #2C3550; --light-gray: #8A93A5;
  --gold-start: #C9A646; --gold-end: #E5C97A;
  --gold-gradient: linear-gradient(135deg, #C9A646, #E5C97A);
  --glass-white: rgba(255,255,255,0.85); --glass-white-dark: rgba(255,255,255,0.95);
  --dark-blue: #0F1F4B; --darker-blue: #081430;
  --dark-gradient: linear-gradient(135deg, #0D1E3A, #070F1E);
  --success-green: #10B981; --warning-yellow: #F59E0B;
  --error-red: #EF4444; --info-blue: #3B82F6;
  --gold-glow-hover: 0 8px 36px rgba(201,166,70,0.55);
}

/* ====================================================================
   DARK THEME — Luxury Navy + Gold (unchanged, only override vars)
==================================================================== */
html[data-theme="light"],
body[data-theme="light"],
body.theme-light {
  color-scheme: light;
}

html[data-theme="dark"],
body[data-theme="dark"],
body.theme-dark {
  color-scheme: dark;
}

html[data-theme="dark"],
body[data-theme="dark"],
body.theme-dark {
  --bg-primary:   #070F1E;
  --bg-secondary: #091428;
  --bg-section:   #0D1E3A;
  --bg-card:      #0D1E3A;
  --bg-card-warm: #0F2040;
  --bg-soft:      #091428;
  /* IMPROVED: brighter, more readable text for dark mode */
  --text-primary:   #EDE6D4;
  --text-secondary: #D2C8B0;
  --text-body:      #BACBD8;
  --text-muted:     #96A8BC;
  --text-light:     #6A7A8A;
  --border-light: rgba(201,166,70,0.12);
  --border-mid:   rgba(201,166,70,0.22);
  --border-soft:  rgba(255,255,255,0.06);
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.3);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.5);
  --grad-hero:    linear-gradient(135deg, #050D1A 0%, #091428 40%, #122549 100%);
  --grad-section: linear-gradient(180deg, #070F1E 0%, #091428 100%);
  --grad-software:linear-gradient(180deg, #050D1A 0%, #091428 100%);
  --glass-light:  rgba(255,255,255,0.06);
  --glass-mid:    rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.15);
  --glass-card:   rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.10);
  --cream-bg: #091428; --white: #0D1E3A; --dark-text: #EDE6D4;
  --navy-700: #0D1E3A;
}

/* ====================================================================
   LIGHT THEME BACKGROUND IMAGE — PAUSED
   To re-enable: remove the outer comment block below
==================================================================== */

/* LIGHT THEME PAUSED — uncomment to re-enable
html:not([data-theme="dark"]) body {
  background-color: #F7F8FB;
  background-image: url('../images/light-bg.png');
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative;
  margin: 0;
  padding: 0;
}

html:not([data-theme="dark"]) body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(247, 248, 251, 0.68);
  pointer-events: none;
  z-index: 0;
}

html:not([data-theme="dark"]) body > * {
  position: relative;
  z-index: 1;
}
END LIGHT THEME PAUSED */

/* Dark theme: solid background, no image, no overlay */
[data-theme="dark"] body {
  background-image: none !important;
  background-color: #070F1E !important;
}
[data-theme="dark"] body::before {
  display: none !important;
}