/**
 * variables.css - Design Tokens & Custom Properties
 * Controlled Celestial Palette for "The Moon Found His Sun"
 */

:root {
  /* Core Controlled Celestial Palette */
  --color-midnight-navy: #10142B;
  --color-dark-indigo: #191D3A;
  --color-warm-gold: #E8BD75;
  --color-soft-ivory: #F5EEDF;
  --color-muted-lavender: #A9A0C9;
  --color-soft-moonlight: #DCE4F2;

  /* Derived Subtle Shades */
  --color-navy-deepest: #0B0E1F;
  --color-indigo-soft: #23284D;
  --color-indigo-mist: rgba(25, 29, 58, 0.78);
  --color-navy-glass: rgba(16, 20, 43, 0.84);

  --color-gold-light: #F2D59B;
  --color-gold-deep: #C99A4E;
  --color-gold-glow: rgba(232, 189, 117, 0.25);
  --color-gold-subtle: rgba(232, 189, 117, 0.12);
  --color-gold-border: rgba(232, 189, 117, 0.28);

  --color-moon-glow: rgba(220, 228, 242, 0.22);
  --color-moon-subtle: rgba(220, 228, 242, 0.1);
  --color-moon-border: rgba(220, 228, 242, 0.18);

  --color-lavender-glow: rgba(169, 160, 201, 0.2);
  --color-lavender-muted: rgba(169, 160, 201, 0.65);

  --color-ivory-muted: rgba(245, 238, 223, 0.86);
  --color-ivory-dim: rgba(245, 238, 223, 0.6);

  /* Semantic Text & Surface Tokens */
  --color-bg-primary: var(--color-midnight-navy);
  --color-bg-secondary: var(--color-dark-indigo);
  --color-text-primary: var(--color-soft-ivory);
  --color-text-secondary: var(--color-soft-moonlight);
  --color-text-muted: var(--color-muted-lavender);
  --color-accent-gold: var(--color-warm-gold);
  --color-accent-moon: var(--color-soft-moonlight);
  --color-border-subtle: rgba(220, 228, 242, 0.12);

  /* Typography Stacks */
  --font-arabic: 'IBM Plex Sans Arabic', 'Alexandria', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-latin: 'Cinzel', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  /* Fluid & Responsive Font Scale */
  --font-size-xs: 0.775rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.15rem;
  --font-size-lg: 1.3rem;
  --font-size-xl: 1.55rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.25rem;

  /* Line Heights */
  --line-height-tight: 1.3;
  --line-height-normal: 1.65;
  --line-height-relaxed: 2.05;
  --line-height-letter: 2.2;

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.25rem;
  --space-3xl: 5rem;
  --space-4xl: 7rem;

  /* Motion & Animation Timings */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-celestial: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms var(--ease-out-quart);
  --transition-normal: 400ms var(--ease-out-quart);
  --transition-slow: 800ms var(--ease-celestial);
  --transition-scene: 1200ms var(--ease-celestial);

  /* Layout & Containers */
  --container-narrative: 720px;
  --container-scene: 920px;
  --container-wide: 1160px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Z-Index Hierarchy */
  --z-sky: 0;
  --z-stars: 1;
  --z-texture: 2;
  --z-content: 10;
  --z-header: 40;
  --z-navigation: 50;
  --z-modal: 100;
}