/* ================================================================
   TrkFit V4 — css/tokens.css
   SINGLE SOURCE OF TRUTH — All design variables
   Edit here → everything updates automatically
================================================================ */

:root {

  /* ── Colors — Light Mode ─────────────────────────────────────── */
  --c-bg:        #f0f5fa;
  --c-bg2:       #e8eef7;
  --c-surface:   #ffffff;
  --c-surface2:  #f5f8fc;
  --c-surface3:  #edf2f9;
  --c-border:    #dde5f0;
  --c-border2:   #c8d4e8;

  /* Text */
  --c-text:      #0a1628;
  --c-text2:     #364f6b;
  --c-text3:     #5a7a96;
  --c-text4:     #96b0c8;
  --c-text-inv:  #ffffff;

  /* Brand */
  --c-accent:    #00c96e;
  --c-accent-dk: #00a55a;
  --c-accent-lt: rgba(0,201,110,.10);
  --c-accent-md: rgba(0,201,110,.20);

  /* Secondary palette */
  --c-blue:      #0072ff;
  --c-blue-lt:   rgba(0,114,255,.10);
  --c-red:       #ff4d6d;
  --c-red-lt:    rgba(255,77,109,.10);
  --c-amber:     #ff9f1c;
  --c-amber-lt:  rgba(255,159,28,.10);
  --c-purple:    #9b27af;
  --c-purple-lt: rgba(155,39,175,.10);
  --c-teal:      #00bcd4;
  --c-teal-lt:   rgba(0,188,212,.10);
  --c-pink:      #e91e8c;
  --c-pink-lt:   rgba(233,30,140,.10);

  /* ── Gradients ───────────────────────────────────────────────── */
  --grad-accent: linear-gradient(135deg, #00c96e 0%, #00a55a 100%);
  --grad-blue:   linear-gradient(135deg, #0072ff 0%, #0050b3 100%);
  --grad-warm:   linear-gradient(135deg, #ff9f1c 0%, #ff6b35 100%);
  --grad-purple: linear-gradient(135deg, #9b27af 0%, #6a0080 100%);
  --grad-hero:   linear-gradient(135deg, #00c96e 0%, #0072ff 100%);
  --grad-glass:  linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));

  /* ── Spacing (8pt grid) ──────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-hi:   'Noto Sans Devanagari', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes (fluid) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  clamp(28px, 4vw, 36px);
  --fs-5xl:  clamp(36px, 6vw, 56px);
  --fs-6xl:  clamp(44px, 7vw, 72px);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.85;

  /* Letter spacing */
  --ls-tight: -1.5px;
  --ls-snug:  -0.5px;
  --ls-wide:  0.4px;
  --ls-wider: 1px;

  /* ── Border Radius ───────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:     14px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --sh-xs:     0 1px 4px rgba(0,0,0,.06);
  --sh-sm:     0 2px 12px rgba(0,0,0,.08);
  --sh:        0 4px 24px rgba(0,0,0,.10);
  --sh-md:     0 8px 32px rgba(0,0,0,.12);
  --sh-lg:     0 16px 56px rgba(0,0,0,.15);
  --sh-xl:     0 24px 80px rgba(0,0,0,.18);
  --sh-accent: 0 8px 32px rgba(0,201,110,.28);
  --sh-blue:   0 8px 32px rgba(0,114,255,.28);
  --sh-inset:  inset 0 2px 8px rgba(0,0,0,.06);

  /* ── Transitions ─────────────────────────────────────────────── */
  --tr:      .18s cubic-bezier(.4, 0, .2, 1);
  --tr-md:   .28s cubic-bezier(.4, 0, .2, 1);
  --tr-slow: .45s cubic-bezier(.4, 0, .2, 1);
  --tr-spring: .45s cubic-bezier(.34, 1.56, .64, 1);
  --tr-bounce: .5s cubic-bezier(.34, 1.8, .64, 1);

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-base:    1;
  --z-above:  10;
  --z-sticky: 100;
  --z-nav:    900;
  --z-mob:    899;
  --z-modal:  1000;
  --z-ai:     1100;
  --z-toast:  1200;
  --z-top:    9999;

  /* ── Layout ──────────────────────────────────────────────────── */
  --nav-h:      64px;
  --sidebar-w:  220px;
  --bot-nav-h:  60px;
  --max-w:      1140px;
  --max-w-sm:   720px;
  --max-w-lg:   1280px;

  /* Wider sidebar on large displays */
  --sidebar-w-lg: 260px;

  /* ── Blur ────────────────────────────────────────────────────── */
  --blur-sm: blur(8px);
  --blur:    blur(16px);
  --blur-lg: blur(24px);
}

/* ── Dark Mode Overrides ─────────────────────────────────────── */
[data-theme="dark"] {
  --c-bg:       #080e18;
  --c-bg2:      #0c1524;
  --c-surface:  #111c2e;
  --c-surface2: #152640;
  --c-surface3: #1a3050;
  --c-border:   #1e3654;
  --c-border2:  #2a4d6e;

  --c-text:     #edf4fc;
  --c-text2:    #94b8d6;
  --c-text3:    #4e7a9e;
  --c-text4:    #33576f;

  --sh-sm: 0 2px 12px rgba(0,0,0,.3);
  --sh:    0 4px 24px rgba(0,0,0,.4);
  --sh-md: 0 8px 32px rgba(0,0,0,.5);
  --sh-lg: 0 16px 56px rgba(0,0,0,.6);
}

/* ── International Mode Hidden Elements ──────────────────────── */
.intl-mode .lang-toggle,
.intl-mode #langToggle,
.intl-mode #langToggleMob {
  display: none !important;
}

/* Internationalization Swapping */
html.intl-mode .in-only, body.intl-mode .in-only { display: none !important; }
.intl-only { display: none !important; }
html.intl-mode .intl-only, body.intl-mode .intl-only { display: inline !important; }