/**
 * Cosmic Finance — Design Tokens
 * Master CSS Custom Properties System
 * Aligned with "Deep Space Meets Gold Vault" Specification
 */

:root {
  /* 1. Background Canvas (4 Depths of Space) */
  --bg-space-950: #04050d; /* Main page canvas */
  --bg-space-900: #080a18; /* Alternating section depth */
  --bg-space-800: #0d1024; /* Cards, panels, and content containers */
  --bg-space-700: #141833; /* Form inputs, raised elements, and hover states */
  --bg-space-600: #1c2145; /* Active/pressed state for controls */

  /* Legacy & Semantic Mapping */
  --space-bg-deepest: var(--bg-space-950);
  --space-bg-mid: var(--bg-space-900);
  --space-bg-card: var(--bg-space-800);
  --space-bg-card-hover: var(--bg-space-700);
  --space-bg-glass: rgba(13, 16, 36, 0.78);
  --space-border-subtle: rgba(168, 165, 196, 0.12);
  --space-border-glow: rgba(157, 130, 240, 0.35);

  /* 2. The Multi-Chromatic Jewel Palette (Breaking Monotone into Premium Luxury) */
  /* Solar Radiant Gold: Earthly Wealth & Surya Light */
  --gold-300: #fae4b5;
  --gold-400: #f6d697;
  --gold-500: #f5be48;
  --gold-600: #d4a753;
  --gold-700: #ad8234;
  --gold-glow: rgba(245, 190, 72, 0.42);

  /* Violet & Amethyst: Cosmic Insight & Shani-Rahu Deep Space */
  --violet-300: #c5b4f6;
  --violet-400: #ad94f3;
  --violet-500: #9d82f0;
  --violet-600: #7d60da;
  --violet-glow: rgba(157, 130, 240, 0.38);

  /* Emerald Mercury: Commerce, Calculation & Auspicious Growth */
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-glow: rgba(16, 185, 129, 0.36);

  /* Sapphire Jupiter: Divine Wisdom, Institutional Expansion & Dharma */
  --sapphire-300: #7dd3fc;
  --sapphire-400: #38bdf8;
  --sapphire-500: #0ea5e9;
  --sapphire-600: #0284c7;
  --sapphire-glow: rgba(56, 189, 248, 0.36);

  /* Ruby Lotus (Lakshmi): Prosperity, Energy & Mars Multi-Asset Spark */
  --ruby-400: #fb7185;
  --ruby-500: #f43f5e;
  --ruby-600: #e11d48;
  --ruby-glow: rgba(244, 63, 94, 0.35);

  /* Multi-Chromatic Iridescent Gradients */
  --grad-aurora: linear-gradient(135deg, rgba(245, 190, 72, 0.18) 0%, rgba(157, 130, 240, 0.16) 45%, rgba(16, 185, 129, 0.16) 100%);
  --grad-cosmic-card: linear-gradient(145deg, rgba(16, 22, 50, 0.85) 0%, rgba(10, 14, 32, 0.92) 100%);
  --grad-gold-emerald: linear-gradient(135deg, #f5be48 0%, #10b981 100%);
  --grad-gold-sapphire: linear-gradient(135deg, #f5be48 0%, #38bdf8 100%);
  --grad-gold-ruby: linear-gradient(135deg, #ffd700 0%, #f43f5e 100%);
  --border-iridescent: linear-gradient(135deg, rgba(245, 190, 72, 0.5) 0%, rgba(157, 130, 240, 0.35) 50%, rgba(16, 185, 129, 0.45) 100%);

  /* 3. Market Movements & Legibility */
  --success-400: #34d399; /* Positive / Gains */
  --negative-400: #f87171; /* Negative / Losses */
  --market-green: var(--success-400);
  --market-green-glow: rgba(52, 211, 153, 0.3);
  --market-red: var(--negative-400);
  --market-red-glow: rgba(248, 113, 113, 0.3);

  /* 4. Text Tones */
  --text-primary: #f8fafc;   /* Ultra-crisp starlight white */
  --text-secondary: #cbd5e1; /* Clear readable prose */
  --text-dim: #94a3b8;       /* Captions / hints */
  --text-muted: var(--text-dim);
  --text-gold: var(--gold-500);
  --text-violet: var(--violet-400);
  --text-emerald: var(--emerald-400);
  --text-sapphire: var(--sapphire-400);

  /* 5. Typography Families */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hindi-display: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', 'Martel', serif;
  --font-hindi-body: 'Noto Sans Devanagari', 'Noto Serif Devanagari', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* IBM Plex Mono (400, 500): Precision Data / Instrument - Every numeric value, price, percentage, tick, coordinate */
  --font-mono: 'IBM Plex Mono', monospace;
  --font-precision: 'IBM Plex Mono', monospace;

  /* Button Tokens */
  --radius-btn: 9999px;
  --gold-gradient: linear-gradient(135deg, #fae4b5 0%, #f2c879 60%, #d4a753 100%);
  --gold-gradient-hover: linear-gradient(135deg, #fff2d6 0%, #f6d697 60%, #f2c879 100%);

  /* Typography Scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 1.0rem;   /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2.0rem;    /* 32px */
  --text-4xl: 2.75rem;   /* 44px */
  --text-hero: 3.75rem;  /* 60px */

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii & Elevations */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 32px rgba(4, 5, 13, 0.65);
  --shadow-gold: 0 0 24px rgba(242, 200, 121, 0.28);
  --shadow-violet: 0 0 24px rgba(157, 130, 240, 0.28);

  /* Layout Dimensions */
  --container-max-width: 1280px;
  --header-height: 52px;

  /* 4b. Navagraha Planetary Identity Tokens */
  --graha-surya: #ffb347;   /* Sun: Warm radiant gold */
  --graha-chandra: #d9e4f5; /* Moon: Silvery pearl shimmer */
  --graha-mangala: #ff5c5c; /* Mars: War crimson */
  --graha-budha: #5ce6c0;   /* Mercury: Mint aquamarine (Tech/IT) */
  --graha-guru: #f4c95d;    /* Jupiter: Royal amber gold (Banks) */
  --graha-shukra: #ffd6e8;  /* Venus: Luminous champagne rose (Auto/Luxury) */
  --graha-shani: #6b7a99;   /* Saturn: Steel slate (Infra/Metals) */
  --graha-rahu: #7a5cff;    /* Rahu: Electric violet void (Crypto/Speculation) */
  --graha-ketu: #8c7b75;    /* Ketu: Smoky burnt ash */

  /* Dedicated Vakri (Retrograde) & Data Status Tokens */
  --signal-retrograde: #b183ff;        /* Distinct neon purple — isolated from market red */
  --signal-retrograde-glow: rgba(177, 131, 255, 0.45);
  --signal-stale: #ffb74d;             /* Amber for market-closed / stale data */

  /* Motion Design System Tokens */
  --ease-cosmic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-orbital: linear;
  --duration-instant: 120ms;
  --duration-transition: 280ms;
  --duration-ambient: 8000ms;
}

/* =========================================================================
   ROYAL IVORY & GOLD THEME TOKENS (LIGHT THEME SPECIFICATION)
   ========================================================================= */
body.theme-light,
[data-theme="light"] {
  /* 1. Background Canvas (Warm Ivory & Royal Cream) */
  --bg-space-950: #fdfbf7;
  --bg-space-900: #f7f4ee;
  --bg-space-800: #ffffff;
  --bg-space-700: #f1ede4;
  --bg-space-600: #e8e2d5;

  --space-bg-deepest: #fdfbf7;
  --space-bg-mid: #f7f4ee;
  --space-bg-card: #ffffff;
  --space-bg-card-hover: #faf8f3;
  --space-bg-glass: rgba(255, 255, 255, 0.94);
  --space-border-subtle: #e2e8f0;
  --space-border-glow: rgba(180, 83, 9, 0.25);

  /* 2. Text Tones (High-Contrast Starlight Dark) */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-dim: #64748b;
  --text-muted: #64748b;
  --text-gold: #b45309;

  /* 3. Jewel Accents adapted for Light Theme */
  --gold-500: #b45309;
  --gold-400: #d97706;
  --gold-glow: rgba(180, 83, 9, 0.2);

  /* Gradients & Shadows */
  --grad-cosmic-card: linear-gradient(145deg, #ffffff 0%, #fdfbf7 100%);
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 8px 30px rgba(126, 18, 42, 0.08);
  --shadow-gold: 0 0 20px rgba(180, 83, 9, 0.15);
}

/* Tabular Numerals Discipline — Eliminates horizontal digit jitter during live ticking */
.telemetry-value,
.asset-price,
.chip-price,
.inst-price,
.hud-ticker-price,
.tabular-nums {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}