/* COPY of the app's design tokens (public/styles.css, top block). Keep identical.
   The landing page is its own Railway service with root /landing, so it can't import ../public.
   Check with: npm run check:tokens  (from landing/) */
/* Waypoint design system.
   Brand: varsity maroon on harbor ink; amber is reserved for heat/caution warnings.
   Every colour, size and gap below comes from these tokens — change them here, not in components. */
:root {
  /* colour */
  --brand: #7F1D2D;          /* varsity maroon: primary actions, active tab, serving badges */
  --brand-press: #64151F;
  --brand-tint: #F7E9EB;
  --on-brand: #FFFFFF;
  --ink: #14233A;            /* harbor ink: body text, map chips */
  --ink-2: #4A5668;          /* secondary text */
  --ink-3: #7C8696;          /* hints, placeholders */
  --page: #EEF0F3;           /* granite: grouped backgrounds inside sheets */
  --card: #FFFFFF;
  --line: #D9DDE3;
  --line-soft: #E8EBEF;
  --warn: #F7A21B;           /* foliage amber: heat and caution only */
  --warn-tint: #FEF3DC;
  --on-warn-tint: #6B4400;
  --on-warn: #14233A;
  --ok: #2E6B4F;             /* pine: "still there" confirmations */
  --ok-tint: #E6F2EC;
  --on-ok-tint: #1F4D38;
  --danger-tint: #F7E9EB;
  --on-danger-tint: #7F1D2D;
  --info-tint: #E8EFF8;
  --on-info-tint: #1D3A63;
  --bathroom: #7c3aed;       /* map data colours: match the pins drawn by map.js */
  --fountain: #0284c7;
  --route: #ea580c;          /* matches the route line drawn by map.js */
  --strava: #fc4c02;         /* Strava brand, used only on Strava actions */
  --scrim: rgba(20, 35, 58, .32);
  --shadow-1: 0 1px 2px rgba(20, 35, 58, .10), 0 2px 8px rgba(20, 35, 58, .10);
  --shadow-2: 0 8px 28px rgba(20, 35, 58, .20);

  /* type: one family, five steps */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 22px; --t-xl: 34px;

  /* space: 4px base, 8px rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px;
  --tap: 48px;               /* minimum touch target */

  /* chrome */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tab-h: 52px;               /* matches iOS's native tab bar */
  --tabbar: calc(var(--tab-h) + var(--safe-b));
  --ease: cubic-bezier(.2, .8, .2, 1);

  font-family: var(--font);
  font-size: var(--t-md);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #E07A8A;          /* maroon's dark-mode companion: same hue, readable on dark */
    --brand-press: #C9677A;
    --brand-tint: #3A1E25;
    --on-brand: #1A0B0F;
    --ink: #EEF1F5;
    --ink-2: #B5BDC9;
    --ink-3: #8691A1;
    --page: #0E1622;
    --card: #182333;
    --line: #2C3A4E;
    --line-soft: #233044;
    --warn-tint: #3A2B0E;
    --on-warn-tint: #FCD48A;
    --ok: #5FB98D;
    --ok-tint: #173528;
    --on-ok-tint: #A9E2C5;
    --danger-tint: #3A1E25;
    --on-danger-tint: #F4B4BE;
    --info-tint: #1A2A42;
    --on-info-tint: #B9D1F2;
    --scrim: rgba(0, 0, 0, .5);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}