/* Inn Transit design tokens: "Night flight".
   Dark-first: deep navy canvas, runway-amber accent, big airport codes, the timeline as a route line.
   :root carries the dark palette (the brand look). A light variant lives under [data-theme="light"].
   Components never hard-code colours; everything reads from here. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* canvas + surfaces */
  --bg: #0b1020;
  --bg-elev: #101833;
  --bg-sunken: #070b18;
  --bg-glow: radial-gradient(120% 55% at 50% -12%, #1b2a55 0%, #0b1020 60%);
  --surface: #121b36;
  --surface-2: #18234a;
  --line: #1f2b52;
  --line-strong: #2e3f73;
  --overlay: rgba(3, 6, 16, .7);

  /* text */
  --fg: #eef1fa;
  --fg-2: #a9b4d6;
  --fg-3: #8b98c2;
  --fg-inverse: #0b1020;

  /* brand: runway amber */
  --accent: #ffb454;
  --accent-hover: #ffc97a;
  --accent-soft: rgba(255, 180, 84, .14);
  --accent-fg: #0b1020;
  --accent-text: #ffb454;
  --accent-glow: 0 10px 30px rgba(255, 180, 84, .28);

  /* trip types: work amber, personal mint */
  --work: #ffb454;
  --work-soft: rgba(255, 180, 84, .14);
  --work-text: #ffb454;
  --personal: #6ee7b7;
  --personal-soft: rgba(110, 231, 183, .14);
  --personal-text: #6ee7b7;
  --shared: #b9a7ff;            /* someone else's trip, view only */
  --shared-soft: rgba(185, 167, 255, .16);
  --shared-text: #cdc2ff;

  /* semantic status */
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .14);
  --ok-text: #6ee7b7;
  --warn: #ffd166;
  --warn-soft: rgba(255, 209, 102, .16);
  --warn-text: #ffd166;
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .16);
  --danger-text: #ff8585;
  --info: #7aa2ff;
  --info-soft: rgba(122, 162, 255, .16);

  /* type */
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Schibsted Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-56: 3.5rem;
  --lh-tight: 1.15;
  --lh: 1.45;
  --track: .16em;

  /* spacing (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* shape */
  --r-card: 16px;
  --r-ctl: 12px;
  --r-pill: 999px;
  --tap: 44px;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .55);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 360ms;

  /* layout */
  --content-max: 1200px;
  --pane-list: 400px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---- light variant: "morning" ------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f9;
  --bg-elev: #ffffff;
  --bg-sunken: #e8ebf4;
  --bg-glow: radial-gradient(120% 55% at 50% -12%, #e3e8f8 0%, #f3f4f9 60%);
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --line: #dde2ee;
  --line-strong: #c3cbde;
  --overlay: rgba(11, 16, 32, .5);

  --fg: #0b1020;
  --fg-2: #445071;
  --fg-3: #6b7797;
  --fg-inverse: #ffffff;

  --accent: #d97a17;
  --accent-hover: #b8640e;
  --accent-soft: rgba(217, 122, 23, .12);
  --accent-fg: #ffffff;
  --accent-text: #9a5008;
  --accent-glow: 0 10px 30px rgba(217, 122, 23, .25);

  --work: #d97a17;
  --work-soft: rgba(217, 122, 23, .12);
  --work-text: #9a5008;
  --personal: #0f9d6c;
  --personal-soft: rgba(15, 157, 108, .12);
  --personal-text: #0b7a53;
  --shared: #6d4fd6;
  --shared-soft: rgba(109, 79, 214, .12);
  --shared-text: #4f36a8;

  --ok: #128a55;
  --ok-soft: rgba(18, 138, 85, .12);
  --ok-text: #0f6f45;
  --warn: #b26a00;
  --warn-soft: rgba(178, 106, 0, .12);
  --warn-text: #8a5200;
  --danger: #d03a3a;
  --danger-soft: rgba(208, 58, 58, .12);
  --danger-text: #b12a2a;
  --info: #2f6df6;
  --info-soft: rgba(47, 109, 246, .12);

  --shadow-1: 0 1px 2px rgba(11, 16, 32, .06);
  --shadow-2: 0 6px 18px rgba(11, 16, 32, .08);
  --shadow-3: 0 24px 60px rgba(11, 16, 32, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}