/**
 * Narayanika Astro Reader - CSS Design System & Variables
 * Theme: Modern Luxury · Indian Spiritual Heritage · Calm Consultation
 */

:root {
  /* --- Primary Deep Midnight Palette --- */
  --primary:         #0C1322;
  --primary-dark:    #070B14;
  --primary-light:   #162238;
  --primary-surface: #1E2D4A;
  --primary-rgb:     12, 19, 34;

  /* --- Warm Refined Gold Accent --- */
  --accent:           #C59A4C;
  --accent-hover:     #D8AA5B;
  --accent-light:     #F6EFE5;
  --accent-dark:      #7A530C; /* WCAG AAA high-contrast gold for light backgrounds */
  --accent-gold-text: #855A12;
  --accent-rgb:       197, 154, 76;
  --accent-border:    rgba(197, 154, 76, 0.35);

  /* --- Backgrounds & Surfaces --- */
  --bg-main:      #FAF8F5;
  --bg-surface:   #FFFFFF;
  --bg-alt:       #F3EFEA;
  --bg-dark:      #0C1322;
  --bg-dark-card: #131D31;

  /* --- Typography Colors (Optimized for High Readability & WCAG AAA Contrast) --- */
  --text-main:           #0F172A; /* Deep dark slate - Maximum legibility */
  --text-muted:          #334155; /* Slate-700 - Highly readable body/meta text */
  --text-light:          #475569; /* Slate-600 - Clear secondary text */
  --text-inverse:        #FFFFFF; /* Pure bright white for dark sections */
  --text-inverse-muted:  #E2E8F0; /* Slate-200 - High contrast on dark backgrounds */
  --text-inverse-subtle: #CBD5E1; /* Slate-300 - Clear secondary on dark */

  /* --- Status & Alerts --- */
  --status-pending:   #D97706;
  --status-confirmed: #0D9488;
  --status-completed: #2563EB;
  --status-cancelled: #DC2626;

  /* --- Borders & Dividers --- */
  --border-light:  #E2DCD5;
  --border-subtle: #EFE9E0;
  --border-dark:   #222F48;
  --border-gold:   rgba(197, 154, 76, 0.45);

  /* --- Typography Stack --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing Scale --- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* --- Container Max Widths --- */
  --container-max:    1200px;
  --container-narrow: 840px;
  --container-xs:     640px;

  /* --- Elevation & Shadows --- */
  --shadow-xs:    0 1px 2px rgba(12, 19, 34, 0.04);
  --shadow-sm:    0 2px 8px rgba(12, 19, 34, 0.07);
  --shadow-md:    0 8px 24px rgba(12, 19, 34, 0.10);
  --shadow-lg:    0 20px 48px rgba(12, 19, 34, 0.14);
  --shadow-gold:  0 8px 24px rgba(197, 154, 76, 0.22);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-Index Scale --- */
  --z-dropdown: 1001;
  --z-sticky:   1000;
  --z-drawer:   999;
  --z-overlay:  998;
}

/* Respect reduced-motion user preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}