/* ==========================================================================
   variables.css — Gulride Design Tokens
   Theme: transit signage. Deep route-map navy, signal-light amber accent,
   dashed "route line" as the signature structural motif throughout the UI.
   ========================================================================== */

:root {
  /* --- Palette --- */
  --color-navy-900: #0B2545;   /* primary brand / header / dark surfaces */
  --color-navy-700: #13315C;
  --color-amber-500: #F2A93B;  /* signal accent — CTAs, active states */
  --color-amber-600: #DB9327;
  --color-green-600: #2E7D5B;  /* success / active trip / "on route" */
  --color-red-600: #C0392B;    /* cancelled / error */
  --color-asphalt-600: #4A5568;
  --color-asphalt-300: #A0AEC0;
  --color-bg-light: #F7F8FA;
  --color-surface-light: #FFFFFF;
  --color-bg-dark: #0D1321;
  --color-surface-dark: #16213E;
  --color-border-light: #E2E6EC;
  --color-border-dark: #263455;
  --color-text-light: #1B1F27;
  --color-text-dark: #EDF1F7;

  /* --- Semantic tokens (flip with [data-theme]) --- */
  --bg: var(--color-bg-light);
  --surface: var(--color-surface-light);
  --border: var(--color-border-light);
  --text: var(--color-text-light);
  --text-muted: var(--color-asphalt-600);
  --brand: var(--color-navy-900);
  --accent: var(--color-amber-500);
  --success: var(--color-green-600);
  --danger: var(--color-red-600);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* --- Layout --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 24px rgba(11, 37, 69, 0.08);
  --shadow-elevated: 0 12px 40px rgba(11, 37, 69, 0.16);
  --container-max: 1200px;
}

[data-theme="dark"] {
  --bg: var(--color-bg-dark);
  --surface: var(--color-surface-dark);
  --border: var(--color-border-dark);
  --text: var(--color-text-dark);
  --text-muted: var(--color-asphalt-300);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Respect OS preference when a user hasn't explicitly chosen (data-theme="auto") */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: var(--color-bg-dark);
    --surface: var(--color-surface-dark);
    --border: var(--color-border-dark);
    --text: var(--color-text-dark);
    --text-muted: var(--color-asphalt-300);
  }
}

/* --- RTL support (Urdu) ---
   Headings/prices/labels elsewhere in the app pin themselves to
   --font-display or --font-mono (Latin display fonts) regardless of
   language, so without this override Urdu pages would mix Nastaliq body
   copy with Latin-styled headings. Buttons/inputs/badges are left on the
   body font since Nastaliq's connected script reads poorly at small
   UI sizes. */
[dir="rtl"] body {
  font-family: 'Noto Nastaliq Urdu', var(--font-body);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: 'Noto Nastaliq Urdu', var(--font-display);
}

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

/* ==========================================================================
   Signature motif: the "route line" — a dashed horizontal line with stop
   dots, used as a section divider and inside the hero. Represents a bus
   route on a map; reused consistently instead of generic dividers.
   ========================================================================== */
.route-line {
  position: relative;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--accent) 0, var(--accent) 10px, transparent 10px, transparent 20px
  );
  margin: 2.5rem 0;
}
.route-line::before,
.route-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.route-line::before { left: 0; }
.route-line::after { right: 0; }