/* ============================================================
   Rocki Track — Design System Variables
   Powered by Alcazar Digital Systems
   ============================================================ */

:root {
  /* Brand palette */
  --color-bg: #0a0a0a;
  --color-bg-elevated: #131313;
  --color-bg-card: #161616;
  --color-border: #262626;
  --color-border-strong: #3a3a3a;

  --color-text: #f2efe9;
  --color-text-muted: #9a958c;
  --color-text-faint: #84807a;

  --color-gold: #d4af5a;
  --color-gold-strong: #e8c877;
  --color-gold-dim: rgba(212, 175, 90, 0.12);

  --color-success: #4caf7d;
  --color-success-dim: rgba(76, 175, 125, 0.12);
  --color-transit: #4a7fd6;
  --color-transit-dim: rgba(74, 127, 214, 0.12);
  --color-warning: #d6a34a;
  --color-warning-dim: rgba(214, 163, 74, 0.12);
  --color-error: #d67373;
  --color-error-dim: rgba(214, 115, 115, 0.12);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 16px 60px rgba(0, 0, 0, 0.6);

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-rtl: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;

  color-scheme: dark;
}

/* Light theme overrides */
body.light-mode {
  --color-bg: #faf8f4;
  --color-bg-elevated: #ffffff;
  --color-bg-card: #ffffff;
  --color-border: #e6e1d8;
  --color-border-strong: #d3ccbf;

  --color-text: #1c1a16;
  --color-text-muted: #6f6a60;
  --color-text-faint: #6e6a63;

  color-scheme: light;
}

:lang(ar), :lang(fa), :lang(ps), [dir='rtl'] {
  font-family: var(--font-rtl);
}