/* ==========================================================================
   SATISH VAID ASTRO — Design System Variables
   Strictly adheres to brand specifications:
   - Primary: Deep Navy Blue (#0F172A)
   - Accents: Warm Gold (#D97706) & Soft Saffron (#F59E0B)
   - Background: Off-White / Soft Cream (#F8FAFC)
   - Contrast Ratio: 4.5:1 minimum on all text containers
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #0F172A;        /* Deep Navy Blue for structure & authority */
  --color-primary-light: #1E293B;  /* Slate 800 */
  --color-primary-dark: #020617;   /* Deepest Navy */

  --color-accent-gold: #D97706;    /* Warm Gold for spiritual & astrological accents */
  --color-accent-gold-hover: #B45309;
  --color-accent-gold-light: #FEF3C7; /* Soft gold tint */

  --color-accent-saffron: #F59E0B; /* Soft Saffron */
  --color-accent-saffron-light: #FFFBEB;

  /* Surfaces & Backgrounds */
  --color-bg: #F8FAFC;             /* Off-white / soft cream background */
  --color-surface: #FFFFFF;        /* Pure white for cards & containers */
  --color-surface-subtle: #F1F5F9; /* Subtle surface for table headers / active states */
  --color-surface-hover: #E2E8F0;

  /* Text Colors (All satisfy >= 4.5:1 contrast ratio) */
  --color-text-main: #0F172A;      /* Contrast on #F8FAFC is > 14:1 */
  --color-text-secondary: #334155; /* Slate 700, contrast > 7:1 */
  --color-text-muted: #475569;     /* Slate 600, contrast > 4.6:1 */
  --color-text-inverse: #FFFFFF;
  --color-text-gold: #92400E;      /* Amber 800 for high-contrast gold text */

  /* Functional Status Colors */
  --color-success: #047857;        /* Emerald 700 (High contrast) */
  --color-success-bg: #ECFDF5;
  --color-warning: #B45309;        /* Amber 700 */
  --color-warning-bg: #FFFBEB;
  --color-danger: #B91C1C;         /* Red 700 */
  --color-danger-bg: #FEF2F2;
  --color-info: #1D4ED8;          /* Blue 700 */
  --color-info-bg: #EFF6FF;

  /* Borders & Dividers */
  --color-border: #CBD5E1;         /* Slate 300 - clear high contrast border */
  --color-border-subtle: #E2E8F0;  /* Slate 200 */
  --color-border-focus: #0F172A;

  /* Typography */
  --font-serif: \'Cinzel\', \'Playfair Display\', \'Georgia\', \'Cambria\', serif;
  --font-sans: system-ui, -apple-system, \'Segoe UI\', Roboto, \'Helvetica Neue\', Arial, sans-serif;

  --font-size-xs: 0.8125rem;  /* 13px */
  --font-size-sm: 0.9375rem;  /* 15px */
  --font-size-base: 1rem;     /* 16px - Base font size (mobile inputs must be >= 16px) */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Spacing (in rem) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* Radii */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-pill: 9999px;

  /* Elevation (Clean, purposeful shadows without over-decoration) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);

  /* Touch Target Constraint */
  --min-tap-target: 2.75rem; /* 44px minimum touch target */

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ==========================================================================
   Cosmic Midnight Dark Theme ([data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] {
  --color-primary: #1E293B;
  --color-primary-light: #334155;
  --color-primary-dark: #0F172A;

  --color-accent-gold: #F59E0B;
  --color-accent-gold-hover: #D97706;
  --color-accent-gold-light: #451A03;

  --color-accent-saffron: #FB923C;
  --color-accent-saffron-light: #431407;

  --color-bg: #070B14;
  --color-surface: #0F172A;
  --color-surface-subtle: #172338;
  --color-surface-hover: #1E2D47;

  --color-text-main: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-text-inverse: #0F172A;
  --color-text-gold: #FCD34D;

  --color-border: #334155;
  --color-border-subtle: #1E293B;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.7);
}