/* =========================================================
   JUNGLE RAJ — DESIGN TOKENS
   भारत की आवाज़ | Of the People • By the People • For the People

   Palette rationale:
   - Base is nearly black with a warm (not blue) undertone, evoking
     official paper-on-slate rather than generic "tech dark mode".
   - Red is the republic seal red used on Ashoka Emblem plinths,
     not a saturated alert-red — it should feel institutional.
   - Saffron & India-green are drawn from the tricolour but rationed
     to small, meaningful moments (verified marks, positive deltas)
     so they read as civic signal, not decoration.
   - Chakra blue is reserved for the signature wheel motif only.
   ========================================================= */

:root {
  /* ---------- Core surfaces ---------- */
  --color-bg: #0a0a0d;
  --color-bg-alt: #0e0e12;
  --color-bg-elevated: #131317;
  --color-surface: rgba(255, 255, 255, 0.045);
  --color-surface-hover: rgba(255, 255, 255, 0.075);
  --color-surface-border: rgba(255, 255, 255, 0.10);
  --color-surface-border-strong: rgba(255, 255, 255, 0.18);

  /* ---------- Brand ---------- */
  --color-red: #c1272d;
  --color-red-bright: #e63946;
  --color-red-dim: #7a1a1f;
  --color-saffron: #ff9933;
  --color-green: #128807;
  --color-green-bright: #1ea80f;
  --color-chakra: #2255a4;

  /* ---------- Text ---------- */
  --color-white: #f7f5f2;
  --color-text: #e7e5e1;
  --color-text-muted: #a3a1a8;
  --color-text-dim: #6c6a72;

  /* ---------- Gradients ---------- */
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(193, 39, 45, 0.28), transparent 60%),
                    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(34, 85, 164, 0.14), transparent 60%),
                    var(--color-bg);
  --gradient-red: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-bright) 100%);
  --gradient-tricolour: linear-gradient(90deg, var(--color-saffron) 0%, var(--color-white) 50%, var(--color-green) 100%);
  --gradient-card-hover: linear-gradient(160deg, rgba(193, 39, 45, 0.10), rgba(255, 255, 255, 0.02));

  /* ---------- Typography ---------- */
  --font-display-en: 'Space Grotesk', 'Hind', sans-serif;
  --font-display-hi: 'Baloo 2', 'Hind', sans-serif;
  --font-body-en: 'Inter', 'Hind', sans-serif;
  --font-body-hi: 'Hind', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.25rem;

  /* ---------- Spacing scale ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* ---------- Radius & shadow ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-red-glow: 0 0 0 1px rgba(193, 39, 45, 0.35), 0 12px 40px rgba(193, 39, 45, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-padding: var(--sp-6);
  --nav-height: 76px;
  --blur-glass: blur(18px);
  /* ---------- Storybook reader ---------- */
  --rd-bg: #0f0f14;
  --rd-text: #e7e5e1;
  --rd-muted: #a3a1a8;
  --rd-page-bg: #131317;
  --rd-page-border: rgba(255,255,255,.10);

}

/* Reduced motion respects user preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* ---------- Storybook reader ---------- */
  --rd-bg: #0f0f14;
  --rd-text: #e7e5e1;
  --rd-muted: #a3a1a8;
  --rd-page-bg: #131317;
  --rd-page-border: rgba(255,255,255,.10);

}