/* Ski Map design tokens (D1 colour scheme, D2 Apple-style type and motion).
   One place for every colour, font, radius and timing. The map layers read the same variables (map.js, token()),
   so changing a value here restyles both the panels and the map.
   Palette: a classic hand-painted Alpine piste map (snow white, cool blue-violet shadows, dark painted forest,
   grey rock, glacier ice) with the European piste colours. It's a stand-in until the owner's reference image
   arrives; see design/README.md for how to swap it. */
:root {
  /* ---------- Terrain (the map itself) ---------- */
  --snow: #f7f9fc;                 /* open ground: everything reads as snow, like a winter piste map */
  --snow-shadow: #3f5885;          /* hillshade shadows, painted blue-violet rather than grey */
  --snow-light: #fffdf6;           /* sunlit slopes, a touch warm */
  --snow-mid: #7489ad;             /* hillshade accent along ridges */
  --forest: #4d7a58;               /* conifer forest below the tree line */
  --rock: #b9b2a8;                 /* bare rock and scree, warm grey */
  --glacier: #e3f0fa;              /* glacier ice */
  --glacier-edge: #a8c8e2;
  --water: #8dbad9;                /* alpine lakes and rivers */
  --water-ink: #2f5f8a;
  --village: #ebe5da;              /* built-up areas, warm like chalets */
  --building: #ddd3c3;
  --building-edge: #cbbfab;
  --road: #ffffff;
  --road-casing: #d4cbbd;
  --road-minor: #e4ddd1;
  --border: #9c8fa6;               /* country and region borders */
  --sky: #b9d4ef;                  /* the sky above the ridge line in the 3D view (focus.js) */
  --sky-horizon: #eaf2fb;          /* haze where the sky meets the far mountains */
  --map-ink: #27313d;              /* place names on the map */
  --map-halo: #ffffff;

  /* ---------- Pistes and lifts (European standard) ---------- */
  --piste-green: #1f9a4b;          /* beginner (France, Spain, Scandinavia) */
  --piste-blue: #1565c0;           /* easy */
  --piste-red: #d7282f;            /* intermediate */
  --piste-black: #16181c;          /* difficult and expert */
  --piste-offpiste: #ee7d1a;       /* ski routes, freeride (dashed) */
  --piste-unknown: #7a8696;
  --piste-edge: #ffffff;           /* the white edge that makes pistes read on terrain */
  --piste-sheen: #ffffff;          /* the light down the middle of a piste that rounds it off (map.js) */
  --resort-outline: var(--navy);   /* the line around the selected resort (outline.js) */
  --lift: #1d1d1f;                 /* lifts: black lines with pylon dots */
  --lift-closed: #8a96a3;
  --selection: #ffcc00;            /* glow around the selected piste, lift or resort */
  --poi-food: #a4502a;             /* restaurants, cafés and mountain huts, warm like a hut on a piste map */
  --poi-parking: #1f5fbf;
  --poi-park: #7a52c7;                 /* snow parks: pin, area tint and name (parks.js) */
  --poi-kids: #d4701a;                 /* kids' areas (playgrounds) */          /* car parks: the blue of a road-sign "P" */
  --poi-junction: var(--navy);         /* piste junctions, places to stop and wait: the ring and glyph of the marker (junctions.js) */
  --poi-offpiste: var(--piste-offpiste);  /* the diamond sign where an off-piste route starts, and the off-piste warning (offpiste.js) */
  --poi-offpiste-ink: var(--text);        /* the "!" on the sign: dark on orange reads better than white */
  --poi-offpiste-text: #a24d06;           /* route names under the signs and the warning's title: the orange, dark enough to read */

  /* ---------- Interface ---------- */
  --navy: #0b2545;                 /* brand: resort dots, titles */
  --navy-rgb: 11 37 69;            /* for tints: rgb(var(--navy-rgb) / .07) */
  --text: #16202c;
  --muted: #5b6b7c;
  --accent: #0a84ff;               /* system blue: buttons, links, your location */
  --accent-rgb: 10 132 255;
  --accent-hover: #0071e3;
  --focus-ring: rgb(var(--accent-rgb) / .5);
  --on-accent: #ffffff;
  --page: var(--snow);

  --fill: rgb(var(--navy-rgb) / .05);         /* stat tiles, quiet boxes */
  --fill-2: rgb(var(--navy-rgb) / .07);       /* buttons, segmented controls */
  --fill-hover: rgb(var(--navy-rgb) / .12);
  --separator: rgb(var(--navy-rgb) / .08);
  --separator-soft: rgb(var(--navy-rgb) / .06);
  --stroke: rgb(var(--navy-rgb) / .15);

  --sos: #d92d20;
  --sos-rgb: 217 45 32;
  --sos-dark: #b42318;
  --badge: #e5362f;                /* unread counts, compass north */
  --live: #1f9d55;                 /* "sharing your location" */
  --switch-on: #34c759;
  --caution: #f5a300;              /* favourite stars */
  --caution-ink: #6b4300;
  --caution-strong: #b25000;       /* poor GPS accuracy */
  --severe: #d70015;               /* severe weather and high avalanche danger */
  --severe-ink: #8f0010;
  /* Weather heads-ups: each kind has its own calm colour, like a weather app; severe ones turn --severe */
  --wx-fog: #66768c;               /* low visibility: slate */
  --wx-wind: #13859a;              /* strong wind: teal */
  --wx-snow: #3a86d4;              /* heavy snowfall: sky blue */
  --wx-cold: #5468d4;              /* extreme cold: ice indigo */
  --wx-storm: #7a52c7;             /* thunderstorms: violet */
  --wx-avalanche: #d9730d;         /* avalanche danger: orange, as on the EAWS scale */
  --destructive: #c62828;

  /* ---------- Frosted glass (Apple "materials") ---------- */
  --glass: rgba(255, 255, 255, .72);          /* controls, search, legend */
  --glass-thick: rgba(255, 255, 255, .84);    /* cards and sheets that hold text */
  --glass-solid: rgba(255, 255, 255, .94);    /* menus and popups */
  --glass-border: rgba(255, 255, 255, .6);
  --blur: saturate(180%) blur(20px);
  --blur-thick: saturate(180%) blur(30px);
  --shadow: 0 6px 24px rgb(var(--navy-rgb) / .14), 0 1px 3px rgb(var(--navy-rgb) / .08);
  --shadow-sheet: 0 -2px 24px rgb(var(--navy-rgb) / .12), 0 0 1px rgb(var(--navy-rgb) / .2);
  --grabber: rgba(60, 60, 67, .3);

  /* ---------- Type: the system font, which is SF Pro on Apple devices ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-title: 20px;
  --tracking-title: -.016em;       /* SF's tighter tracking at title sizes */

  /* ---------- Shape and space ---------- */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --gutter: max(16px, env(safe-area-inset-left));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.25, .1, .25, 1);      /* standard */
  --ease-out: cubic-bezier(.2, .8, .2, 1);    /* things arriving: decelerate gently */
  --ease-sheet: cubic-bezier(.32, .72, 0, 1); /* iOS sheet curve */
  --dur-fast: .2s;
  --dur: .32s;
  --dur-slow: .45s;
}