/*
 * Design tokens: the shared contract (PLAN §7.2) used by the public app, ui/help/lead components and admin.
 * Brand: Līvu Koks (livukoks.lv) "Zelta akcents" palette — warm cream paper, petrol-dark ink, gold as the
 * dominant accent, the logo teal (#12908A) for focus and info — and the website's fonts: Manrope (text),
 * Source Serif 4 (headings), Hanken Grotesk (headline figure). Map data keeps the VMD mežaudžu plāns
 * species colours; the value/status/age ramps are built from the brand gold → teal → petrol.
 *
 * Every token from PLAN §7.2 is defined here with the exact light value. Dark values apply with
 * [data-theme="dark"] or, when no theme is forced, with prefers-color-scheme: dark.
 * Map colours (--sp-*, --st-*, --val-*, --map-*) are the same in both themes because they paint the map,
 * which is not themed.
 *
 * Extensions beyond §7.2 (safe for any consumer): --c-ink-3, --c-accent-hover, --c-accent-soft,
 * --c-{ok,warn,danger,info}-soft, --c-scrim, --map-ink, --map-halo, --map-chrome, --shadow-1/2,
 * --focus-w, --wdth-cond/--wdth-semi, --font-display/--font-accent/--font-num, --c-accent-text, --lh-tight/--lh-body, --dur-1/2, --ease-out, --panel-w,
 * --sheet-peek/half/full, --grid-cell, --grid-major, --z-*.
 */
:root {
  color-scheme: light;

  /* ---- typography ---- */
  --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-display: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;   /* headings, as on livukoks.lv */
  --font-accent: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif; /* headline figure only */
  --font-num: "Manrope", "Manrope Fallback", system-ui, sans-serif;   /* figures & codes, with tabular-nums */
  --font-mono: var(--font-num); /* legacy alias: the brand has no monospace face */
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-body: 1.45;
  --wdth-cond: 100%;  /* Manrope has no width axis; kept so older rules stay valid */
  --wdth-semi: 100%;

  /* ---- spacing & radii ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --r-sm: 2px;
  --r-md: 4px;

  /* ---- light: livukoks.lv sand paper + petrol ink + gold ---- */
  --c-bg: #fdfaf2;        /* sand-50  */
  --c-surface: #ffffff;
  --c-surface-2: #f7f1e2; /* sand-100 */
  --c-ink: #1d2b2a;       /* forest-900 */
  --c-ink-2: #45413a;     /* ink-700 */
  --c-ink-3: #6f6a60;     /* >= 4.5:1 on bg (5.2), surface (5.4), surface-2 (4.8) */
  --c-line: #ddd6c4;
  --c-grid: rgba(29, 43, 42, .06);
  --c-accent: #f5c518;       /* moss-500: fills — buttons, active bars, markers; text on it is --c-accent-ink */
  --c-accent-hover: #ffd94f; /* moss-400 */
  --c-accent-soft: rgba(245, 197, 24, .20);
  --c-accent-ink: #1d2b2a;   /* 9.0:1 on --c-accent */
  --c-accent-text: #826200;  /* gold as text/icon on light grounds, >= 5:1 (site's moss-600 is 4.3:1 on sand-100) */
  --c-focus: #12908a;        /* logo teal, >= 3.4:1 on every ground */
  --c-ok: #2a7449;
  --c-warn: #a8570a;
  --c-danger: #b42318;
  --c-info: #0e7570;         /* darkened logo teal for text */
  --c-ok-soft: rgba(42, 116, 73, .10);
  --c-warn-soft: rgba(168, 87, 10, .10);
  --c-danger-soft: rgba(180, 35, 24, .08);
  --c-info-soft: rgba(18, 144, 138, .10);
  --c-scrim: rgba(29, 43, 42, .55); /* the site's --overlay-forest tone */

  /* ---- VMD legend (decoded from docs/legend PNG), age groups 1..4 ---- */
  --sp-priede-1: #fed9c1;
  --sp-priede-2: #feb789;
  --sp-priede-3: #fe944e;
  --sp-priede-4: #fe7114;
  --sp-egle-1: #efc6ef;
  --sp-egle-2: #e18fe1;
  --sp-egle-3: #d169d1;
  --sp-egle-4: #c41ac4;
  --sp-berzs-1: #ccffff;
  --sp-berzs-2: #99ffff;
  --sp-berzs-3: #52ffff;
  --sp-berzs-4: #00fefe;
  --sp-melnalksnis-1: #e2c1fe;
  --sp-melnalksnis-2: #c59afe;
  --sp-melnalksnis-3: #a87cfe;
  --sp-melnalksnis-4: #7f54fe;
  --sp-apse-1: #befebe;
  --sp-apse-2: #7efe7e;
  --sp-apse-3: #3efe3e;
  --sp-apse-4: #00fe00;
  --sp-baltalksnis-1: #d2d200;
  --sp-baltalksnis-2: #a6a600;
  --sp-baltalksnis-3: #7a7a00;
  --sp-baltalksnis-4: #4f4f00;
  --sp-ozols-1: #cecece;
  --sp-ozols-2: #9f9f9f;
  --sp-ozols-3: #6f6f6f;
  --sp-ozols-4: #404040;
  --sp-osis-1: #c3e1e6;
  --sp-osis-2: #a2d0de;
  --sp-osis-3: #81bfd1;
  --sp-osis-4: #59a9bd;
  --sp-liepa-1: #fefebe;
  --sp-liepa-2: #fefe7e;
  --sp-liepa-3: #ffff40;
  --sp-liepa-4: #f7f700;
  --sp-lapegle-4: #f400f4;
  --sp-goba-4: #329732;
  --sp-pilad-1: #d7c29e;
  --sp-nodata: #f4eeea;

  /* ---- text-safe species inks for letters on light bg ---- */
  --ink-priede: #c2410c;
  --ink-egle: #9c179c;
  --ink-berzs: #007a7a;
  --ink-melnalksnis: #5b3fd1;
  --ink-apse: #1f7a1f;
  --ink-baltalksnis: #5e5e00;

  /* ---- stand status and value ramps (map vocabulary; mirrored in ui.js / codes.js for canvas) ---- */
  --st-mature: #f5c518;      /* "Tavs mežs — Tavs zelts": ready to harvest = gold */
  --st-approaching: #fbe49a;
  --st-growing: #12908a;
  --st-young: #9ed9d0;
  --st-restricted: #6b5b95;
  --st-plantation: #1e9bd7;  /* logo blue */
  --st-none: #d6cdb5;
  /* €/ha: sand → gold → olive → teal → petrol, L* 96 89 80 71 59 48 36 */
  --val-1: #fbf4d9;
  --val-2: #f8e08a;
  --val-3: #f2c21c;
  --val-4: #a9b645;
  --val-5: #4f9e78;
  --val-6: #15807a;
  --val-7: #1f5f5a;

  /* ---- map chrome (not themed: sits on imagery and OSM) ---- */
  /* ---- Līvu Koks logo colours (brand mark, header strip) ---- */
  --brand-gold: #ffd100;
  --brand-teal: #12908a;
  --brand-blue: #1e9bd7;

  --map-ink: #1d2b2a;
  --map-halo: #ffffff;
  --map-chrome: rgba(253, 250, 242, .92);

  /* ---- depth, focus, motion ---- */
  --shadow-1: 0 1px 0 rgba(29, 43, 42, .05), 0 1px 3px rgba(29, 43, 42, .10);
  --shadow-2: 0 2px 4px rgba(29, 43, 42, .08), 0 12px 32px rgba(29, 43, 42, .14);
  --focus-w: 2px;
  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ---- layout ---- */
  --panel-w: 420px;
  --sheet-peek: 96px;
  --sheet-half: 50vh;
  --sheet-full: 92vh;
  --grid-cell: 24px;   /* hairline grid */
  --grid-major: 120px; /* "kvartāls" lines, every 5 cells */
  --z-map-ui: 10;
  --z-panel: 20;
  --z-masthead: 30;
  --z-dialog: 100;
  --z-toast: 110;
}

@supports (height: 1dvh) {
  :root {
    --sheet-half: 50dvh;
    --sheet-full: 92dvh;
  }
}

/* ---- dark (forced) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #111b1a;        /* bark-950 */
  --c-surface: #172322;   /* bark-900 */
  --c-surface-2: #1d2b2a; /* forest-900 */
  --c-ink: #fdfaf2;
  --c-ink-2: #d6cfbd;
  --c-ink-3: #a39d8d;
  --c-line: #2a3d3c;      /* forest-800 */
  --c-grid: rgba(253, 250, 242, .05);
  --c-accent: #f5c518;
  --c-accent-hover: #ffd94f;
  --c-accent-soft: rgba(245, 197, 24, .16);
  --c-accent-ink: #1d2b2a;
  --c-accent-text: #ffd94f;
  --c-focus: #3fc1b6;
  --c-ok: #5cc28a;
  --c-warn: #f0a44b;
  --c-danger: #f87171;
  --c-info: #4fc3bb;
  --c-ok-soft: rgba(92, 194, 138, .12);
  --c-warn-soft: rgba(240, 164, 75, .12);
  --c-danger-soft: rgba(248, 113, 113, .12);
  --c-info-soft: rgba(79, 195, 187, .12);
  --c-scrim: rgba(0, 0, 0, .6);
  --ink-priede: #fb8a3c;
  --ink-egle: #e879e8;
  --ink-berzs: #52ffff;
  --ink-melnalksnis: #b69bff;
  --ink-apse: #6ee76e;
  --ink-baltalksnis: #d2d200;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .5);
}

/* ---- dark (system preference, unless light is forced) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #111b1a;        /* bark-950 */
    --c-surface: #172322;   /* bark-900 */
    --c-surface-2: #1d2b2a; /* forest-900 */
    --c-ink: #fdfaf2;
    --c-ink-2: #d6cfbd;
    --c-ink-3: #a39d8d;
    --c-line: #2a3d3c;      /* forest-800 */
    --c-grid: rgba(253, 250, 242, .05);
    --c-accent: #f5c518;
    --c-accent-hover: #ffd94f;
    --c-accent-soft: rgba(245, 197, 24, .16);
    --c-accent-ink: #1d2b2a;
    --c-accent-text: #ffd94f;
    --c-focus: #3fc1b6;
    --c-ok: #5cc28a;
    --c-warn: #f0a44b;
    --c-danger: #f87171;
    --c-info: #4fc3bb;
    --c-ok-soft: rgba(92, 194, 138, .12);
    --c-warn-soft: rgba(240, 164, 75, .12);
    --c-danger-soft: rgba(248, 113, 113, .12);
    --c-info-soft: rgba(79, 195, 187, .12);
    --c-scrim: rgba(0, 0, 0, .6);
    --ink-priede: #fb8a3c;
    --ink-egle: #e879e8;
    --ink-berzs: #52ffff;
    --ink-melnalksnis: #b69bff;
    --ink-apse: #6ee76e;
    --ink-baltalksnis: #d2d200;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .5);
  }
}