/**
 * variables.css
 * Design tokens for RailStudy. Palette: Navy + Amber, DARK theme
 * (reversed from the earlier light-theme decision on 2026-09-04, after
 * direct comparison against diplomate.online showed the dark treatment
 * reading as more premium — headline scale and restraint matter more
 * than light-vs-dark, but the person explicitly chose dark on seeing
 * both side by side). Matched to diplomate's actual surface/shadow/
 * accent treatment, translated from their mint accent to RailStudy's
 * amber.
 */

:root {
  /* Brand colors — expanded shade range for depth (not flat 2-3 colors) */
  --rh-navy-950: #021B33;
  --rh-navy-900: #042C53;
  --rh-navy-800: #0C447C;
  --rh-navy-700: #14568F;
  --rh-navy-600: #2270AD;
  --rh-navy-100: #E6F1FB;

  --rh-amber-500: #EF9F27;
  --rh-amber-600: #D6870F;
  --rh-amber-400: #F5B559;
  --rh-amber-text: #412402;
  --rh-amber-dim: rgba(239,159,39,0.14);
  --rh-amber-glow: rgba(239,159,39,0.4);

  --rh-signal-red: #FF6B6A; /* brightened for dark-surface contrast — reserved: errors, negative marking indicators only */
  --rh-success: #3DBE82; /* brightened for dark-surface contrast */

  /* Semantic surface colors — dark theme. Three graduated dark-navy
     shades (not one flat color) so cards, page bg, and nested surfaces
     stay visually distinct, matching diplomate's navy-dark/mid/light. */
  --rh-surface-0: #0F2035;
  --rh-surface-1: #081422;
  --rh-surface-2: #14273D;
  --rh-border: rgba(230,241,251,0.12);
  --rh-border-strong: rgba(230,241,251,0.24);

  --rh-text-primary: #EAF2FB;
  --rh-text-secondary: rgba(234,242,251,0.68);
  --rh-text-muted: rgba(234,242,251,0.42);
  --rh-text-on-navy: #E6F1FB;

  /* Source-reliability badge colors — brightened from the light-theme
     values so they stay clearly legible against a dark surface. Must
     stay visually distinct from each other. */
  --rh-source-official: #3DBE82;
  --rh-source-semi-official: #F0B429;
  --rh-source-unofficial: #9AA4AE;

  /* Typography — distinctive display font for headings, clean body font,
     dedicated Devanagari face so Hindi never falls back to a mismatched
     system font. */
  --rh-font-display: 'Manrope', 'Noto Sans Devanagari', sans-serif;
  --rh-font-body: 'Inter', 'Noto Sans Devanagari', sans-serif;
  --rh-font-base: var(--rh-font-body);
  --rh-fs-xs: 12px;
  --rh-fs-sm: 14px;
  --rh-fs-base: 16px;
  --rh-fs-lg: 18px;
  --rh-fs-xl: 22px;
  --rh-fs-2xl: 30px;
  --rh-fs-3xl: 40px;

  /* Spacing scale */
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 24px;
  --rh-space-6: 32px;
  --rh-space-8: 48px;

  /* Radii — larger, softer, matching a premium feel rather than flat/boxy */
  --rh-radius-sm: 8px;
  --rh-radius-md: 12px;
  --rh-radius-lg: 18px;
  --rh-radius-xl: 26px;

  /* Shadows — black-based, not navy-tinted, since a navy-tinted shadow
     is invisible against a navy background. Amber glow stays as the
     accent shadow, matching diplomate's mint-glow pattern. */
  --rh-shadow-card: 0 1px 3px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.18);
  --rh-shadow-card-hover: 0 8px 28px rgba(0,0,0,0.35);
  --rh-shadow-card-hover-amber: 0 16px 40px rgba(239,159,39,0.22);
  --rh-shadow-amber-glow: 0 8px 24px var(--rh-amber-glow);
  --rh-shadow-navy: 0 4px 32px rgba(0,0,0,0.4);

  /* Motion */
  --rh-transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --rh-transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
}