/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Surface */
  --color-background:       #FFFFFF;
  --color-surface:          #F7F7F7;
  --color-border:           #E0E0E0;

  /* Text */
  --color-text:             #111111;
  --color-text-secondary:   #6B6B6B;

  /* Actions — "Glacier" alpine blue */
  --color-primary:          #1E7FBF;
  --color-on-primary:       #FFFFFF;
  --color-accent:           #E3F4FF;

  /* Slope difficulty — semantic only, never reused for general UI */
  --color-slope-green:      #33C800;
  --color-slope-blue:       #0056C8;
  --color-slope-red:        #E90C00;
  --color-slope-black:      #000000;

  /* Faint difficulty-tinted row backgrounds — route steps only */
  --color-slope-green-bg:   #EAF9E0;
  --color-slope-blue-bg:    #E3EEFB;
  --color-slope-red-bg:     #FBE7E5;
  --color-slope-black-bg:   #E7E7E7;

  /* Avalanche danger scale — official EAWS 5-level colours, semantic only,
     fixed across light/dark like the slope-difficulty set above. Level 5
     is officially red with black diagonal hatching; a flat swatch can't
     reproduce the hatch, so it's darkened to a near-black red instead of
     reusing level 4's red. --color-on-avalanche-* is the readable
     text/icon colour for each swatch (dark ink on the pale low levels,
     white on the saturated high ones). */
  --color-avalanche-1:      #CCFF66;
  --color-avalanche-2:      #FFFF00;
  --color-avalanche-3:      #FF9900;
  --color-avalanche-4:      #FF0000;
  --color-avalanche-5:      #8B0000;
  --color-on-avalanche-1:   #1D2B0A;
  --color-on-avalanche-2:   #332B00;
  --color-on-avalanche-3:   #3A1F00;
  --color-on-avalanche-4:   #FFFFFF;
  --color-on-avalanche-5:   #FFFFFF;

  /* Informational UI (live conditions dashboard) — see prompts/BRAND_DESIGN.md.
     Fixed across light/dark except where noted; never used for general UI. */
  --color-hero-bg:          #163A5C;
  --color-hero-text:        #FFFFFF;
  --color-warning-bg:       #FBF0CE;
  --color-warning-icon:     #755A0E;
  --color-status-open:      #1F9D55;

  /* Select dropdown chevron: icons.js chevronDown drawn in --color-text at
     60% opacity, matching the weather card's chevron. A data URI can't read
     currentColor, so the stroke colour is baked in per theme. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9 L12 16 L19 9'/%3E%3C/svg%3E");

  /* Typography */
  --font:                   'Nunito', system-ui, -apple-system, sans-serif;
  --fw-semibold:            600;
  --fw-bold:                700;

  /* Spacing scale (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 999px;
}

/* ── Blob background ──────────────────────────────────────────────────────── */
#blob-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  filter: blur(72px);
  opacity: 0.65;
}

/* Theme: System follows prefers-color-scheme; the Settings tab can force
   light or dark via [data-theme] on <html> (src/theme.js). Every dark-only
   rule therefore needs both selectors: system-dark-unless-forced-light, and
   forced dark. */
:root                    { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #blob-bg { opacity: 0.35; }
}
:root[data-theme="dark"] #blob-bg { opacity: 0.35; }

/* Dark tokens: the two blocks below must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background:       #111111;
    --color-surface:          #3A3A3A;
    --color-border:           #4A4A4A;

    --color-text:             #FFFFFF;
    --color-text-secondary:   #AAAAAA;

    --color-primary:          #4FA8DE;
    --color-on-primary:       #062338;
    --color-accent:           rgba(79, 168, 222, 0.22);

    /* Lightened for contrast on dark backgrounds */
    --color-slope-blue:       #4D8FE0;
    --color-slope-red:        #FF3D33;
    /* green and black unchanged */

    --color-slope-green-bg:   #1E3314;
    --color-slope-blue-bg:    #1B2C42;
    --color-slope-red-bg:     #3D1E1C;
    --color-slope-black-bg:   #222222;

    --color-warning-bg:       #3A331A;
    --color-warning-icon:     #E0BB4D;
    --color-status-open:      #4CC97F;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9 L12 16 L19 9'/%3E%3C/svg%3E");
    /* --color-hero-bg / --color-hero-text intentionally unchanged —
       fixed "photo card" surface */
  }
}

:root[data-theme="dark"] {
  --color-background:       #111111;
  --color-surface:          #3A3A3A;
  --color-border:           #4A4A4A;

  --color-text:             #FFFFFF;
  --color-text-secondary:   #AAAAAA;

  --color-primary:          #4FA8DE;
  --color-on-primary:       #062338;
  --color-accent:           rgba(79, 168, 222, 0.22);

  /* Lightened for contrast on dark backgrounds */
  --color-slope-blue:       #4D8FE0;
  --color-slope-red:        #FF3D33;
  /* green and black unchanged */

  --color-slope-green-bg:   #1E3314;
  --color-slope-blue-bg:    #1B2C42;
  --color-slope-red-bg:     #3D1E1C;
  --color-slope-black-bg:   #222222;

  --color-warning-bg:       #3A331A;
  --color-warning-icon:     #E0BB4D;
  --color-status-open:      #4CC97F;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9 L12 16 L19 9'/%3E%3C/svg%3E");
  /* --color-hero-bg / --color-hero-text intentionally unchanged —
     fixed "photo card" surface */
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html {
  font-family: var(--font);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  /* The sticky header's compact/expanded states animate its own height.
     Without this, the browser's scroll-anchoring feature compensates by
     nudging scrollY, which can push it back across that threshold and
     cause the header to flicker between states. */
  overflow-anchor: none;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  overflow-anchor: none;
}