/* Shared design tokens -- and the one primitive built directly on them, the
 * button -- for every surface RunMapApp renders: the marketing site
   (css/marketing.css), the route builder (css/main.css, css/panel.css) and the
   login page (css/login.css). Loaded first by all of them.
 *
 * This file exists for the same reason includes/canopy.php holds the canopy
 * ramp and src/legStyle.js holds the route ramp: one definition, several
 * consumers, so they cannot drift. The marketing site and the app used to have
 * separate palettes -- charcoal, #ccc borders and 4px corners in the app, green
 * hairlines and softer corners on the site -- and they read as two products.
 *
 * WHAT DOES NOT BELONG HERE: anything that encodes data. The 1-5 hazard
 * colours and the shade ramp live in src/legStyle.js; the canopy cover ramp
 * lives in includes/canopy.php. --mk-shade-* below is a *mirror* of the shade
 * ramp for the marketing site's decorative use only (CSS cannot import a JS
 * constant); nothing in the app should read it instead of legStyle.js. */

:root {
  /* Neutrals, biased very slightly green so they sit under the canopy palette
     rather than fighting it as a flat grey would. */
  --mk-ink: #14181b;
  --mk-ink-2: #4b555b;
  --mk-ink-3: #7d888e;
  --mk-paper: #ffffff;
  --mk-paper-2: #f6f8f6;
  --mk-paper-3: #eef2ee;
  --mk-line: #e2e8e3;
  --mk-line-strong: #cfd8d1;

  /* On a dark surface (the marketing CTA band and footer). */
  --mk-on-ink-2: #9aa4ab;

  /* Accent. Canopy green carries every active/selected state; sun gold is kept
     for things that genuinely mean "the sun". */
  --mk-accent: #1b5e20;
  --mk-accent-hover: #2e7d32;
  --mk-accent-soft: #eef4ec;
  --mk-accent-border: #cfe0cd;
  --mk-sun: #f0b429;

  /* Waypoint and endpoint dots on the map, and their legend swatches. This is
     deliberately NOT --mk-accent: the accent is #1b5e20, which is also the
     full-shade end of the route ramp, so a green waypoint dot would be
     invisible against a fully shaded leg. Map geometry stays neutral. */
  --mk-map-marker: #14181b;
  --mk-danger: #a12b2b;
  --mk-danger-soft: #fdecea;
  --mk-danger-border: #f5c2bd;

  /* Mirror of SHADE_COLORS 1-5 in src/legStyle.js -- marketing decoration
     only, see the note above. */
  --mk-shade-1: #f0b429;
  --mk-shade-2: #b7c93f;
  --mk-shade-3: #6fae4a;
  --mk-shade-4: #3c8c3f;
  --mk-shade-5: #1b5e20;

  /* Mirror of the app's crossing/sidewalk map-layer colours, same caveat.
     These are copied from DOT_COLOR/SIGNAL_DOT_COLOR in src/crossingsLayer.js
     and PRESENT_COLOR/MISSING_COLOR/PATH_COLOR/BIKEWAY_COLOR in
     src/sidewalksLayer.js -- if those change, change these. Three of them were
     wrong when this file was first written, so the marketing legend showed
     colours the app never draws. Check against the JS, don't eyeball it. */
  --mk-crossing: #1565c0;
  --mk-signal: #2e7d32;
  /* These four are DEFAULTS. includes/marketingLayout.php re-declares them
     inline from includes/mapStyle.php, so whatever is set in
     admin.runmapapp.com/map-settings.php wins on the marketing pages the same
     way it wins on the map. Editing them here changes only the fallback. */
  --mk-walk-yes: #00838f;
  --mk-walk-no: #e64a19;
  --mk-walk-path: #7b52c9;
  --mk-walk-bikeway: #b5397f;

  --mk-radius: 12px;
  --mk-radius-sm: 8px;
  --mk-radius-xs: 6px;
  --mk-shell: 1120px;
  --mk-header-h: 68px;
  --mk-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Panels floating over the map: a hairline plus a soft drop, the same
     treatment the marketing site's demo card gets. */
  --mk-shadow-panel: 0 1px 2px rgba(20, 24, 27, 0.06), 0 8px 24px -10px rgba(20, 24, 27, 0.35);
  --mk-shadow-pop: 0 2px 4px rgba(20, 24, 27, 0.05), 0 16px 36px -14px rgba(20, 24, 27, 0.4);

  /* ---- Names the app's CSS already used, remapped onto the palette above.
     Kept so existing rules in main.css/panel.css/login.css pick the new look up
     without every one of them having to be rewritten. --charcoal in particular
     was the app's active/selected colour everywhere; it is now canopy green,
     which is what actually aligns the app with the site. The --ink/--muted
     aliases went with the app's old near-black header, which is now the same
     paper surface the marketing header uses. */
  --charcoal: var(--mk-accent);
  --charcoal-hover: var(--mk-accent-hover);
  --tint: var(--mk-accent-soft);
  --tint-border: var(--mk-accent-border);
  --tint-text: var(--mk-accent);
}

/* -- Form control reset ------------------------------------------------------
   Browsers don't inherit color/font onto <button>/<input>/<select>/<textarea>
   by default -- they use the platform's own control colour, which is black-
   ish on desktop Chrome/Firefox/Edge (close enough to --mk-ink that plain
   buttons without an explicit `color` looked fine there and this went
   unnoticed) but the system tint, bright blue, on iOS Safari. Found live on a
   real iPhone: every button that didn't set its own `color` (most of the app
   -- .toolbar-modes, .toolbar-actions, .map-panel-header and others rely on
   inheriting page text colour, which without this rule they never actually
   get) rendered as bare blue link text with no border or background, while
   the ones with an explicit colour (.active, .danger, .mk-btn's own variants)
   looked correct. One rule here fixes every button/input on every page
   loading this file, rather than patching each class that happens to be
   missing `color`. */
button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

/* -- Buttons ----------------------------------------------------------------
   Lives here rather than in css/marketing.css because the app header uses it
   too, and the app does not load the marketing stylesheet. One definition, so
   a button is the same object on the marketing site, the sign-in page and the
   route builder. */

.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--mk-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.mk-btn-dark { background: var(--mk-ink); color: #fff; }
.mk-btn-dark:hover { background: #000; }

.mk-btn-outline {
  border-color: var(--mk-line-strong);
  background: rgba(255, 255, 255, 0.7);
  color: var(--mk-ink);
}
.mk-btn-outline:hover { background: #fff; border-color: var(--mk-ink-3); }

.mk-btn-sun { background: var(--mk-sun); color: #201703; font-weight: 620; }
.mk-btn-sun:hover { background: #ffc53d; }

.mk-btn-onink { border-color: #333c41; color: #fff; }
.mk-btn-onink:hover { background: #1e2529; }

/* The "Account" button in #app-nav/.marketing-nav, pulled closer to the CTA
   right after it than the nav's own 24px gap (nav links, Account, CTA all
   share one flex gap) -- negative margin on the flex item shrinks just this
   one gap without touching the others. Shared here, not duplicated in
   css/main.css and css/marketing.css, since both navs use this exact class. */
.mk-account-btn {
  margin-right: -16px;
}