/* ============================================
   LUNAR BASE - Frontend Variables
   Astrology-first, tech-second
   ============================================ */

:root {
  /* ===== LAYOUT & MAX-WIDTHS ===== */
  --max-width-container: 1200px;
  --max-width-section: 700px;
  --max-width-hero-img: 520px;
  --max-width-hero-img-mobile: 400px;
  --max-width-footer-brand: 300px;
  --max-width-text: 50ch;

  /* ===== HEADER & NAVIGATION ===== */
  --size-header-sm: 48px;
  --size-header-lg: 72px;
  --color-header-bg: rgba(11, 13, 23, 0.85);
  --color-header-bg-scrolled: rgba(11, 13, 23, 0.95);
  --color-header-shadow: rgba(0, 0, 0, 0.3);
  --color-nav-hover: rgba(200, 182, 255, 0.06);
  --z-header: 1000;
  --z-header-toggle: 1001;

    /* Forms */
    --form-input-bg: #4b5563;
    --form-input-border-color: #e9e9e9;
    --form-input-color: #ffffff;
    --form-label-color: #fafafa;
    --form-button-bg: #333333;
    --form-button-color: #ffffff;
    --form-addon-bg: #353c46;
    --form-addon-color: #ffffff;

  /* ===== BUTTONS & INTERACTIONS ===== */
  --color-btn-primary-shadow: rgba(157, 124, 255, 0.25);
  --color-btn-primary-shadow-hover: rgba(157, 124, 255, 0.4);
  --color-btn-outline-hover: rgba(200, 182, 255, 0.1);
  --color-footer-social-hover: rgba(200, 182, 255, 0.1);

  /* ===== HERO SECTION ===== */
  --hero-bg: #0B0D17;
  --hero-star-bg: #C8B6FF;
  --hero-star-shadow: #C8B6FF;
  --hero-glow: rgba(200, 182, 255, 0.15);
  --color-hero-glow-1: rgba(157, 124, 255, 0.08);
  --color-hero-glow-2: rgba(160, 196, 255, 0.05);
  --color-hero-badge-bg: rgba(200, 182, 255, 0.08);
  --color-hero-image-shadow: rgba(50, 50, 50, 0.5);
  --radius-hero-img: 80px;
  --z-hero-glow: 1;
  --z-loader: 10;

  /* ===== STATUS & BADGES ===== */
  --color-status-live-bg: rgba(129, 199, 132, 0.12);
  --color-status-live-text: #81C784;
  --color-status-live-border: rgba(129, 199, 132, 0.2);
  --color-status-soon-bg: rgba(255, 214, 165, 0.12);
  --color-status-soon-text: var(--color-accent);
  --color-status-soon-border: rgba(255, 214, 165, 0.2);

  /* ===== SELECTION ===== */
  --color-selection-bg: var(--color-primary-dark);
  --color-selection-text: #ffffff;

  /* ===== TYPOGRAPHY SCALE ===== */
  --font-size-xxs: 0.75rem;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.15rem;
  --font-size-2xl: 1.2rem;
  --font-size-3xl: 1.3rem;
  --font-size-4xl: 1.5rem;
  --font-size-5xl: 1.8rem;
  --font-size-6xl: 2.5rem;
  --font-size-hero: 2.8rem;
  --font-size-hero-lg: 4.5rem;

  /* ===== SPACING SCALE ===== */
  --space-xxs: 0.3rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ===== ICONS & COMPONENT SIZES ===== */
  --size-icon-xxs: 14px;
  --size-icon-xs: 16px;
  --size-icon-sm: 20px;
  --size-icon-md: 24px;
  --size-icon-lg: 28px;
  --size-icon-xl: 36px;
  --size-icon-2xl: 64px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 100px;

  /* ===== Z-INDEX (GENERAL) ===== */
  --z-dropdown: 999;
  --z-modal: 9999;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* ===== CORE PALETTE (DARK) ===== */
  --color-bg-deep:       #0B0D17;
  --color-bg-dark:       #12152B;
  --color-bg-card:       #1A1E3A;
  --color-bg-card-hover: #22274A;
  --color-primary:       #C8B6FF;
  --color-primary-light: #E0D4FF;
  --color-primary-dark:  #9D7CFF;
  --color-secondary:     #A0C4FF;
  --color-accent:        #FFD6A5;
  --color-link:          #A0C4FF;
  --color-text:          #E8E6F0;
  --color-text-muted:    #8A87A8;
  --color-text-dim:      #5A5780;
  --color-border:        rgba(200, 182, 255, 0.12);
  --color-border-hover:  rgba(200, 182, 255, 0.2);
  --color-border-light:  rgba(200, 182, 255, 0.08);
  --color-glow:          rgba(157, 124, 255, 0.15);
  --code-block-bg:       #746fb1;

  /* ===== FONTS ===== */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===== LIGHT THEME OVERRIDES ===== */
[data-theme="light"] {
  --color-bg-deep:       #FFFFFF;
  --color-bg-dark:       #F5F3FA;
  --color-bg-card:       #FFFFFF;
  --color-bg-card-hover: #F0EDF8;
  --color-primary:       #7B5FC7;
  --color-primary-light: #9D7CFF;
  --color-primary-dark:  #5E3FAE;
  --color-secondary:     #6B9BD1;
  --color-accent:        #E5A855;
  --color-link:          #4a90e2;
  --color-text:          #2D2A3E;
  --color-text-muted:    #6b7280;
  --color-text-dim:      #9A97B0;
  --color-border:        rgba(123, 95, 199, 0.15);
  --color-border-hover:  rgba(123, 95, 199, 0.3);
  --color-border-light:  #eeeeee;
  --color-glow:          rgba(123, 95, 199, 0.08);
  --hero-bg:             #FFFFFF;

  /* Component & Interaction Overrides */
  --color-header-bg: rgba(255, 255, 255, 0.85);
  --color-header-bg-scrolled: rgba(255, 255, 255, 0.95);
  --color-header-shadow: rgba(0, 0, 0, 0.08);
  --color-nav-hover: rgba(123, 95, 199, 0.06);
  --color-btn-primary-shadow: rgba(123, 95, 199, 0.2);
  --color-btn-primary-shadow-hover: rgba(123, 95, 199, 0.35);
  --color-btn-outline-hover: rgba(123, 95, 199, 0.1);
  --color-footer-social-hover: rgba(123, 95, 199, 0.1);
  --color-hero-badge-bg: rgba(123, 95, 199, 0.08);
  --color-hero-image-shadow: rgba(0, 0, 0, 0.15);

  /* Status Overrides (adapted to light contrast) */
  --color-status-live-bg: #d1fae5;
  --color-status-live-text: #10b981;
  --color-status-live-border: #9ae6b4;
  --color-status-soon-bg: #fef3c7;
  --color-status-soon-text: #f59e0b;
  --color-status-soon-border: #fde08b;

  /* Selection Override */
  --color-selection-text: #111111;

    /* Forms */
    --form-input-bg: #fff;
    --form-input-border-color: #ccc;
    --form-input-color: #333;
    --form-label-color: #666;
    --form-button-bg: #4123a4;
    --form-button-color: #ffffff;
    --form-addon-bg: #e9e9e9;
    --form-addon-color: #333333;
}