/* ============================================================
   NariTales India — Design Tokens (Luxury Dark Theme)
   Deep Purple-Black · Gold Accents · Glass Effects
   ============================================================ */

/* ============================================================
   DARK THEME (Default - Luxury)
   ============================================================ */
:root,
[data-theme="dark"] {
  /* === Brand Colors === */
  --brand-gold: #f6e2a6;
  --brand-gold-rich: #caa24b;
  --brand-gold-light: #f3d997;
  --brand-gold-dark: #c9a04a;
  --brand-gold-muted: rgba(202, 162, 75, 0.6);

  /* === Backgrounds (Dark Luxury) === */
  --bg-deepest: #0b0810;
  --bg-dark: #1a1320;
  --bg-mid: #2a2030;
  --bg-elevated: #2d2535;

  /* === Surfaces === */
  --surface-base: #0b0810;
  --surface-raised: #1a1320;
  --surface-sunken: #080510;
  --surface-inverse: #f5f1ea;

  /* === Glass System === */
  --glass-bg: rgba(26, 19, 32, 0.7);
  --glass-bg-strong: rgba(26, 19, 32, 0.85);
  --glass-border: rgba(202, 162, 75, 0.15);
  --glass-border-strong: rgba(202, 162, 75, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* === Text Colors === */
  --text-primary: #f5f1ea;
  --text-secondary: #c4b8a8;
  --text-tertiary: rgba(245, 241, 234, 0.6);
  --text-disabled: rgba(245, 241, 234, 0.35);
  --text-inverse: #0b0810;
  --text-on-brand: #0b0810;
  --text-link: #f6e2a6;
  --text-link-hover: #f3d997;

  /* === Borders === */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-brand: rgba(202, 162, 75, 0.35);

  /* === Status Colors === */
  --color-success: #4caf82;
  --color-warning: #e5a848;
  --color-error: #e06868;
  --color-info: #5ba4d4;

  /* === Glow Effects === */
  --glow-brand: 0 0 40px rgba(246, 226, 166, 0.25);
  --glow-gold: 0 0 30px rgba(202, 162, 75, 0.4);
  --glow-gold-strong: 0 0 60px rgba(202, 162, 75, 0.5);

  /* === Skeleton === */
  --skeleton-base: #1a1320;
  --skeleton-shine: #2a2030;
  --skeleton-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);

  /* === Typography === */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* === Spacing (8pt grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-3xl: 36px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 26px 60px -22px rgba(0, 0, 0, 0.75);
  --shadow-float: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 18px 40px -14px rgba(202, 162, 75, 0.5);

  /* === Motion === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* === Z-index Scale === */
  --z-base: 1;
  --z-dropdown: 50;
  --z-nav: 90;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* === Layout === */
  --header-height: 60px;
  --header-height-desktop: 72px;
  --bottom-nav-height: 64px;
  --container-max: 1280px;
  --container-padding: 16px;

  /* === Decorative === */
  --gradient-hero: linear-gradient(135deg, #0b0810 0%, #1a1320 50%, #0b0810 100%);
  --gradient-gold: linear-gradient(135deg, var(--brand-gold-rich) 0%, var(--brand-gold) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

/* ============================================================
   LIGHT THEME (Optional)
   ============================================================ */
[data-theme="light"] {
  /* === Brand Colors (Same gold accents) === */
  --brand-gold: #caa24b;
  --brand-gold-rich: #a88535;
  --brand-gold-light: #f6e2a6;
  --brand-gold-dark: #8c6d29;
  --brand-gold-muted: rgba(202, 162, 75, 0.6);

  /* === Backgrounds (Warm Light) === */
  --bg-deepest: #faf8f5;
  --bg-dark: #f0ebe4;
  --bg-mid: #e8e0d5;
  --bg-elevated: #ffffff;

  /* === Surfaces === */
  --surface-base: #faf8f5;
  --surface-raised: #ffffff;
  --surface-sunken: #f0ebe4;
  --surface-inverse: #1a1320;

  /* === Glass System === */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(202, 162, 75, 0.2);
  --glass-border-strong: rgba(202, 162, 75, 0.35);
  --glass-shadow: 0 8px 32px rgba(26, 19, 32, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* === Text Colors === */
  --text-primary: #1a1320;
  --text-secondary: #5a5048;
  --text-tertiary: rgba(26, 19, 32, 0.6);
  --text-disabled: rgba(26, 19, 32, 0.35);
  --text-inverse: #faf8f5;
  --text-on-brand: #ffffff;
  --text-link: #a88535;
  --text-link-hover: #caa24b;

  /* === Borders === */
  --border-subtle: rgba(26, 19, 32, 0.06);
  --border-default: rgba(26, 19, 32, 0.1);
  --border-strong: rgba(26, 19, 32, 0.18);
  --border-brand: rgba(202, 162, 75, 0.35);

  /* === Status Colors === */
  --color-success: #2e7d5b;
  --color-warning: #c9881a;
  --color-error: #b33a3a;
  --color-info: #2d6a8f;

  /* === Glow Effects === */
  --glow-brand: 0 0 40px rgba(202, 162, 75, 0.2);
  --glow-gold: 0 0 30px rgba(202, 162, 75, 0.3);
  --glow-gold-strong: 0 0 60px rgba(202, 162, 75, 0.4);

  /* === Skeleton === */
  --skeleton-base: #e8e0d5;
  --skeleton-shine: #f0ebe4;
  --skeleton-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(26, 19, 32, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 19, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(26, 19, 32, 0.08);
  --shadow-lg: 0 16px 48px rgba(26, 19, 32, 0.1);
  --shadow-xl: 0 24px 64px rgba(26, 19, 32, 0.12);
  --shadow-card: 0 26px 60px -22px rgba(26, 19, 32, 0.15);
  --shadow-float: 0 20px 50px -20px rgba(26, 19, 32, 0.2);
  --shadow-glow: 0 18px 40px -14px rgba(202, 162, 75, 0.4);

  /* === Decorative === */
  --gradient-hero: linear-gradient(135deg, #faf8f5 0%, #f0ebe4 50%, #faf8f5 100%);
  --gradient-gold: linear-gradient(135deg, var(--brand-gold-rich) 0%, var(--brand-gold) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 100%);
}