/* =========================================================
   Astra Transportation — Design Tokens
   ---------------------------------------------------------
   Base tokens first, semantic tokens second.
   Load Google Fonts in HTML head:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================= */

:root {
  /* -----------------------------------------------------------
     COLOR — base palette
     ----------------------------------------------------------- */

  /* Ink — deep navy. Primary text + structural elements. */
  --ink-900: #0E1A2F;
  --ink-800: #142544;
  --ink-700: #1A2B4A;   /* canonical ink */
  --ink-600: #2A3D5E;
  --ink-500: #43577A;
  --ink-400: #6A7C9B;
  --ink-300: #97A4BD;
  --ink-200: #C4CCD9;
  --ink-100: #E2E6EE;
  --ink-50:  #F1F3F7;

  /* Saffron — brand accent. Bus-yellow with more warmth. */
  --saffron-900: #7A5708;
  --saffron-800: #9C720E;
  --saffron-700: #C49014;
  --saffron-600: #DDA31D;
  --saffron-500: #F5B82E;  /* canonical saffron */
  --saffron-400: #F8C95E;
  --saffron-300: #FAD789;
  --saffron-200: #FCE4B0;
  --saffron-100: #FDF0D4;
  --saffron-50:  #FEF8E8;

  /* Cream + paper — warm neutrals (slight beige undertone). */
  --cream:       #FBF6EC;  /* canonical background */
  --cream-deep:  #F4ECDB;
  --paper:       #FFFFFF;

  /* Stone — warm gray ramp for borders, dividers, secondary surfaces. */
  --stone-900: #2A2520;
  --stone-800: #423B33;
  --stone-700: #5C5347;
  --stone-600: #7A6E5E;
  --stone-500: #998B78;
  --stone-400: #B5A992;
  --stone-300: #D3CAB6;
  --stone-200: #E8E0D0;   /* canonical hairline */
  --stone-100: #F0EADB;
  --stone-50:  #F7F2E6;

  /* Sage — safe / on-route affirmative. */
  --sage-700: #4F6B4C;
  --sage-500: #6E8A6B;
  --sage-300: #A8BFA5;
  --sage-100: #E0EADE;

  /* Brick — delay / alert. Used sparingly. */
  --brick-700: #8A2F1A;
  --brick-500: #B7472A;
  --brick-300: #E0987E;
  --brick-100: #F4D9CC;

  /* Sky — info / generic blue. */
  --sky-700: #2D5B82;
  --sky-500: #4E84B0;
  --sky-300: #9CC0DA;
  --sky-100: #DCEAF3;

  /* -----------------------------------------------------------
     COLOR — semantic
     ----------------------------------------------------------- */
  --bg:           var(--cream);
  --bg-elevated: var(--paper);
  --bg-sunken:   var(--cream-deep);
  --bg-overlay:  rgba(26, 43, 74, 0.45);

  --fg:          var(--ink-700);          /* default text */
  --fg-muted:    var(--ink-500);          /* secondary text */
  --fg-subtle:   var(--ink-400);          /* tertiary / metadata */
  --fg-on-ink:   var(--cream);            /* text on dark surfaces */
  --fg-on-saffron: var(--ink-800);        /* text on saffron */

  --border:      var(--stone-200);
  --border-strong: var(--stone-300);
  --divider:     var(--stone-100);

  --accent:      var(--saffron-500);
  --accent-hover: var(--saffron-600);
  --accent-press: var(--saffron-700);
  --accent-soft: var(--saffron-100);

  --success:     var(--sage-500);
  --success-bg:  var(--sage-100);
  --warning:     var(--saffron-700);
  --warning-bg:  var(--saffron-100);
  --danger:      var(--brick-500);
  --danger-bg:   var(--brick-100);
  --info:        var(--sky-500);
  --info-bg:     var(--sky-100);

  --focus-ring:  0 0 0 3px rgba(245, 184, 46, 0.45);

  /* -----------------------------------------------------------
     TYPE — families
     ----------------------------------------------------------- */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-sans:    "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (px) — display uses Newsreader, body uses Manrope. */
  --t-display-xl: 72px;
  --t-display-lg: 56px;
  --t-display-md: 44px;
  --t-display-sm: 34px;
  --t-h1: 32px;
  --t-h2: 24px;
  --t-h3: 20px;
  --t-h4: 18px;
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 13px;
  --t-eyebrow: 12px;

  /* Line-heights */
  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Letter-spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.12em;

  /* -----------------------------------------------------------
     SPACING — 4px base grid
     ----------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;     /* inputs, buttons */
  --r-lg:   12px;    /* cards */
  --r-xl:   20px;    /* big feature cards */
  --r-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS — whispered, never shouted
     ----------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(26, 43, 74, 0.06);
  --shadow-md:  0 1px 2px rgba(26, 43, 74, 0.06), 0 4px 12px rgba(26, 43, 74, 0.04);
  --shadow-lg:  0 2px 4px rgba(26, 43, 74, 0.06), 0 12px 28px rgba(26, 43, 74, 0.08);
  --shadow-focus: var(--focus-ring);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-in:   cubic-bezier(.4,.0,1,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
  --dur-fast:  120ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   (Optional — apply to elements directly, or copy patterns)
   ========================================================= */

body, .astra-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.astra-display-xl, .astra-display-lg, .astra-display-md, .astra-display-sm,
.astra-h1, .astra-h2, .astra-h3, .astra-h4 {
  font-family: var(--font-display);
  color: var(--ink-700);
  margin: 0;
  text-wrap: balance;
}

.astra-display-xl { font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.astra-display-lg { font-size: var(--t-display-lg); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.astra-display-md { font-size: var(--t-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.astra-display-sm { font-size: var(--t-display-sm); line-height: var(--lh-heading); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }

.astra-h1 { font-size: var(--t-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-semibold); }
.astra-h2 { font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-semibold); }
.astra-h3 { font-size: var(--t-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.astra-h4 { font-size: var(--t-h4); line-height: var(--lh-tight); font-weight: var(--fw-semibold); font-family: var(--font-sans); }

.astra-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); }
.astra-body    { font-size: var(--t-body);    line-height: var(--lh-body); }
.astra-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-body); color: var(--fg-muted); }
.astra-caption { font-size: var(--t-caption); line-height: var(--lh-tight); color: var(--fg-muted); }

.astra-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-muted);
}

.astra-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

a { color: var(--ink-700); text-underline-offset: 2px; }
a:hover { color: var(--saffron-700); }