/* ============================================================================
   OPENLAND — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Design language: "Field Instrument".
   Reference points: USGS topographic quadrangles, expedition-vehicle gauge
   clusters, National Forest routed signage, high-visibility trail gear.

   Three themes, all first-class:
     day    — warm bone paper, maximum contrast for direct desert sunlight
     dusk   — deep pine (default), for the other twenty hours
     night  — monochrome red on black; preserves dark-adapted night vision

   Everything here is a variable. No component file may hard-code a color.
   ========================================================================== */

/* --- Typefaces (self-hosted, OFL, no network at runtime) ----------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/big-shoulders-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Type stacks ------------------------------------------------------ */
  --font-display: 'Big Shoulders', 'Archivo Narrow', 'Haettenschweiler',
                  system-ui, sans-serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Type scale ------------------------------------------------------
     Display sizes are condensed, so they run larger than their optical
     weight suggests. Body never drops below 16px — this is read at arm's
     length, in a moving vehicle, often by someone who is tired.           */
  --t-hero:    clamp(2.6rem, 11vw, 3.75rem);
  --t-display: clamp(1.75rem, 6.5vw, 2.25rem);
  --t-title:   1.375rem;
  --t-heading: 1.0625rem;
  --t-body:    1rem;
  --t-meta:    0.8125rem;
  --t-micro:   0.6875rem;
  --t-data:    0.875rem;
  --t-data-lg: 1.5rem;

  --lh-tight: 1.02;
  --lh-snug:  1.25;
  --lh-body:  1.5;

  /* Label tracking: condensed caps need air to stay legible at a glance. */
  --track-label: 0.09em;
  --track-micro: 0.14em;

  /* --- 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;

  /* --- Rhythm -----------------------------------------------------------
     One gutter and one set of vertical steps, used by every panel-level
     element there is. The panel used to run three different left edges at
     once — the search capsule, the sheet body and the card text each set
     their own padding — which reads as sloppiness long before anyone can say
     why. Anything that stacks in a panel aligns to --gutter and separates by
     one of these three, and nothing invents its own number.

     --gap-tight   related rows inside one block
     --gap-block   between blocks that belong to the same idea
     --gap-section between ideas                                          */
  --gutter: var(--s-4);
  --gap-tight: var(--s-2);
  --gap-block: var(--s-4);
  --gap-section: var(--s-6);

  /* --- Geometry ---------------------------------------------------------
     Slightly squared. Instruments, not bubbles.                           */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --hair: 1px;

  /* Minimum touch target. Gloved hands, washboard roads. */
  --tap: 48px;
  --tap-sm: 44px;

  /* --- Motion -----------------------------------------------------------
     Physical and quick. Nothing decorative, nothing that costs battery.   */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 320ms;

  /* --- Layering ---------------------------------------------------------- */
  --z-map: 1;
  --z-map-ui: 20;
  --z-sheet: 40;
  --z-bar: 50;
  --z-modal: 70;
  --z-toast: 90;

  /* --- Safe areas (notches, home indicators, one-handed reach) ---------- */
  --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);
}

/* ============================================================================
   THEME: DUSK (default)
   Deep pine ground so the map reads as terrain, not as a screen.
   ========================================================================== */

:root,
[data-theme='dusk'] {
  color-scheme: dark;

  --ground-0: #0B120F;   /* behind everything; map void */
  --ground-1: #111B17;   /* app chrome */
  --ground-2: #17251F;   /* sheets, bars */
  --ground-3: #1F3028;   /* cards on sheets */
  --ground-4: #273B32;   /* pressed / hovered */

  --line:        #2F443A;
  --line-strong: #3D5449;

  --ink:   #F1EFE6;      /* bone. 14.9:1 on ground-2 */
  --ink-2: #B7C3BA;      /*  7.8:1 */
  --ink-3: #869790;      /*  4.7:1 — meta text only */

  --signal:       #FF7A2F;  /* brand orange: primary action, "you" */
  --signal-quiet: #C25818;
  --signal-ink:   #1A0E05;
  --signal-wash:  rgba(255, 122, 47, 0.14);

  --amber: #E9BC4C;      /* elevation, topo, caution */
  --water: #5FB3D6;      /* water, rivers, fill points */
  --go:    #63C88A;      /* free, verified, open */
  --warn:  #EDA83F;
  --stop:  #F0666B;
  --violet:#A78BD0;      /* cell coverage */

  --go-wash:   rgba(99, 200, 138, 0.14);
  --warn-wash: rgba(237, 168, 63, 0.14);
  --stop-wash: rgba(240, 102, 107, 0.15);
  --water-wash:rgba(95, 179, 214, 0.14);

  --scrim:      rgba(6, 10, 8, 0.62);
  --sheet-glass: rgba(23, 37, 31, 0.93);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.44);
  --shadow-3: 0 -8px 40px rgba(0,0,0,.5);

  --map-mode: dark;
}

/* ============================================================================
   THEME: DAY
   Warm bone paper. Tuned for a phone at 40% brightness on a sunlit dash.
   ========================================================================== */

[data-theme='day'] {
  color-scheme: light;

  --ground-0: #E6E1D4;
  --ground-1: #F4F1E8;
  --ground-2: #FCFAF3;
  --ground-3: #FFFFFF;
  --ground-4: #EFEBE0;

  --line:        #D8D1BF;
  --line-strong: #B9B09A;

  --ink:   #131C18;      /* 15.6:1 on ground-2 */
  --ink-2: #414E47;      /*  8.4:1 */
  --ink-3: #62706A;      /*  4.9:1 */

  --signal:       #C24A12;  /* 4.9:1 on ground-2 — passes as text */
  --signal-quiet: #8F3608;
  --signal-ink:   #FFF6EF;
  --signal-wash:  rgba(194, 74, 18, 0.10);

  --amber: #8A6410;
  --water: #1B6C8F;
  --go:    #1F7A45;
  --warn:  #8A5B0B;
  --stop:  #B2242A;
  --violet:#5C4A8A;

  --go-wash:   rgba(31, 122, 69, 0.10);
  --warn-wash: rgba(138, 91, 11, 0.11);
  --stop-wash: rgba(178, 36, 42, 0.10);
  --water-wash:rgba(27, 108, 143, 0.10);

  --scrim:       rgba(30, 26, 16, 0.4);
  --sheet-glass: rgba(252, 250, 243, 0.95);

  --shadow-1: 0 1px 2px rgba(60,50,30,.14);
  --shadow-2: 0 4px 16px rgba(60,50,30,.16);
  --shadow-3: 0 -8px 40px rgba(60,50,30,.20);

  --map-mode: light;
}

/* ============================================================================
   THEME: NIGHT
   Long-wavelength red only. Rod cells in the human eye are near-blind to
   deep red, so a red-only interface leaves dark adaptation intact — you can
   check the map and still see the road, the stars, or the animal in the
   brush. Every hue collapses to a red ramp; meaning is carried by
   brightness and shape instead.
   ========================================================================== */

[data-theme='night'] {
  color-scheme: dark;

  /* Not pure black. A near-black ground compresses the usable luminance range
     so hard that meta text has nowhere to sit — the first version put hints at
     2.5:1, which is unreadable. Lifting the ground a few points gives the ink
     ramp room to separate while still reading unmistakably as night.

     The whole ramp is one warm-red hue varied only by lightness, so hierarchy
     survives the loss of hue. Blue stays the lowest channel throughout: rods
     peak near 498nm, so blue is what actually costs dark adaptation — a little
     green is a far cheaper way to buy legibility.

     Every value below is solved against --ground-3, the lightest surface that
     carries text, so every other surface clears the bar with room to spare.
     Verified by tools/contrast-check.mjs. */

  --ground-0: #0C0403;
  --ground-1: #150705;
  --ground-2: #1C0806;
  --ground-3: #241009;
  --ground-4: #30160F;

  --line:        #4A2119;
  --line-strong: #652F24;

  --ink:   #FF7B62;   /* 7.2:1 on cards */
  --ink-2: #E35F4B;   /* 5.2:1 */
  --ink-3: #D85241;   /* 4.5:1 — the smallest text, so it has to clear AA */

  --signal:       #FB3C28;
  --signal-quiet: #A82616;
  --signal-ink:   #1A0300;
  --signal-wash:  rgba(251, 60, 40, 0.18);

  /* Semantics separate by lightness and saturation rather than hue: the
     lightest reads as safe, the most saturated as alarm. */
  --amber: #F47F53;
  --water: #E76F5C;
  --go:    #E77F68;
  --warn:  #F45D3B;
  --stop:  #FC2D21;
  --violet:#F55358;

  --go-wash:   rgba(231, 127, 104, 0.15);
  --warn-wash: rgba(244, 93, 59, 0.15);
  --stop-wash: rgba(252, 45, 33, 0.16);
  --water-wash:rgba(231, 111, 92, 0.15);

  --scrim:       rgba(6, 2, 1, 0.74);
  --sheet-glass: rgba(28, 8, 6, 0.96);

  --shadow-1: 0 1px 2px rgba(0,0,0,.7);
  --shadow-2: 0 4px 16px rgba(0,0,0,.7);
  --shadow-3: 0 -8px 40px rgba(0,0,0,.8);

  --map-mode: night;
}

/* ============================================================================
   LAND OWNERSHIP PALETTE
   Follows the convention printed on US public-land atlases (Benchmark,
   National Geographic) so anyone who has held a paper map already knows how
   to read it: BLM yellow, Forest Service green, Park Service deep green,
   State blue. Learnability beats novelty here.
   ========================================================================== */

:root {
  --land-blm:    #D9A93A;
  --land-usfs:   #4C8A5E;
  --land-nps:    #2C6B4E;
  --land-usfws:  #C07A3C;
  --land-state:  #5288BD;
  --land-tribal: #9A6A4C;
  --land-usace:  #4F9C9C;
  --land-doD:    #B05A6A;
  --land-local:  #8B7BB5;
  --land-other:  #7D8A82;
  --land-wild:   #C4553F;   /* designated Wilderness — no vehicles */
  --land-alpha:  0.30;
  --land-alpha-line: 0.85;
}

[data-theme='night'] {
  /* Ownership collapses to the red ramp at night, so the legend carries the
     names and these only need to be distinguishable from each other. */
  --land-blm:    #E8674F;
  --land-usfs:   #A03A2C;
  --land-nps:    #7E2C21;
  --land-usfws:  #CE543F;
  --land-state:  #B4452F;
  --land-tribal: #8E3527;
  --land-usace:  #6E2A1F;
  --land-doD:    #D9503C;
  --land-local:  #9C3B2B;
  --land-other:  #62241A;
  --land-wild:   #FF5C46;
  --land-alpha:  0.26;
}

/* ============================================================================
   ROAD DIFFICULTY RAMP (1–5)
   The single most consequential number for whether a rig arrives intact.
   ========================================================================== */

:root {
  --road-1: #63C88A;   /* paved */
  --road-2: #B7C95E;   /* graded dirt */
  --road-3: #E9BC4C;   /* rough dirt, clearance */
  --road-4: #ED8A3F;   /* high clearance, likely 4WD */
  --road-5: #F0666B;   /* technical 4WD */
}
[data-theme='day'] {
  --road-1: #1F7A45; --road-2: #5E7A17; --road-3: #8A6410;
  --road-4: #A85212; --road-5: #B2242A;
}
[data-theme='night'] {
  --road-1: #F09A80; --road-2: #EE8368; --road-3: #EF6B4C;
  --road-4: #F55337; --road-5: #FB3C28;
}

/* ============================================================================
   ACCESSIBILITY OVERRIDES
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --line: var(--line-strong);
    --ink-3: var(--ink-2);
    --hair: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}