/* ==========================================================================
   CarbonRoute — Design tokens
   WHITE · TEAL · GOLD

   White carries the product. Teal means movement, intelligence and
   sustainability. Gold is rare: it marks optimisation, significance and
   achievement. Deep navy appears only as type, as contrast, and over
   satellite imagery — never as the primary surface.
   ========================================================================== */

:root {
  /* --- Surfaces: warm white, never clinical grey ----------------------- */
  --canvas:      #f7f9f9;   /* the page itself */
  --surface:     #ffffff;   /* cards, panels */
  --surface-2:   #f2f6f6;   /* insets, table headers */
  --surface-3:   #e8eeee;   /* hover, subtle fills */
  --ivory:       #fbfaf7;   /* warm secondary surface */

  --line:        #dde5e6;
  --line-soft:   #eaf0f0;
  --line-strong: #c2d0d2;

  /* --- Type: deep navy-charcoal, not black ----------------------------- */
  --ink:         #0e2230;
  --text:        #123040;
  --text-dim:    #3d5a68;
  --muted:       #5f7c88;
  --faint:       #8aa1ab;

  /* --- Teal: the brand's movement colour -------------------------------
     A sophisticated blue-green, not a neon cyan. */
  --teal:        #0d8f8f;
  --teal-deep:   #07636a;
  --teal-dark:   #04434b;
  --teal-bright: #14b8a6;
  --teal-soft:   #d3ecec;
  --teal-wash:   #edf7f7;

  /* --- Gold: metallic, restrained, earned ------------------------------
     Desaturated toward bronze so it never reads as cheap yellow. */
  --gold:        #b08423;
  --gold-deep:   #8a6416;
  --gold-bright: #d4a843;
  --gold-soft:   #f4ead2;
  --gold-wash:   #fbf6ea;

  /* --- Semantics -------------------------------------------------------- */
  --success:     #0f8a6a;
  --success-soft:#dcf0e8;
  --warn:        #b08423;
  --warn-soft:   #f4ead2;
  --copper:      #c2742a;
  --danger:      #b4342f;
  --danger-soft: #f8e2e0;
  --info:        var(--teal);

  /* --- Dark contexts: satellite overlays, map chrome -------------------- */
  --navy:        #0b1f2b;
  --navy-2:      #113040;
  --on-dark:     #eef5f6;
  --on-dark-dim: #a9c2cb;

  /* --- Glass over satellite imagery ------------------------------------ */
  --glass:       rgba(255, 255, 255, 0.92);
  --glass-thin:  rgba(255, 255, 255, 0.82);
  --glass-line:  rgba(13, 143, 143, 0.18);
  --blur:        blur(16px) saturate(1.15);

  /* --- Elevation: soft shadow, never glow ------------------------------- */
  --shadow-1: 0 1px 2px rgba(14, 34, 48, .06), 0 1px 1px rgba(14, 34, 48, .04);
  --shadow-2: 0 2px 4px rgba(14, 34, 48, .05), 0 8px 20px rgba(14, 34, 48, .07);
  --shadow-3: 0 4px 8px rgba(14, 34, 48, .06), 0 20px 48px rgba(14, 34, 48, .12);
  --shadow-map: 0 2px 6px rgba(9, 28, 40, .14), 0 12px 36px rgba(9, 28, 40, .18);
  --ring-teal: 0 0 0 3px rgba(13, 143, 143, .16);
  --ring-gold: 0 0 0 3px rgba(176, 132, 35, .18);

  /* --- Geometry --------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 7px;  --r-md: 11px;
  --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* --- Rhythm ----------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --rail-right: 344px;
  --topbar-h: 60px;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 460ms;
  --dur-4: 780ms;
  --dur-cinematic: 1400ms;
}

@media (prefers-contrast: more) {
  :root {
    --text: #06161f;
    --muted: #2f4a56;
    --faint: #4d6874;
    --line: #a8bcc0;
    --line-strong: #7d979e;
    --teal: #056b6b;
    --gold: #7d5c10;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms;
    --dur-4: 1ms; --dur-cinematic: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set `display` on elements the application also
   toggles with the `hidden` attribute, and a class selector outranks the user
   agent's `[hidden]` rule. Stating it once here keeps `hidden` meaning hidden. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--teal-soft); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ------------------------------------------------------- type utilities */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--faint);
}
.label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}

.dim { color: var(--muted); }
.faint { color: var(--faint); }
.teal { color: var(--teal); }
.gold { color: var(--gold); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: var(--sp-3); z-index: 999;
  background: var(--surface); color: var(--text);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }