/* Avesmaps design tokens — the single source of truth for the shared warm,
   aventurian visual language. Never hardcode a colour, size, radius, spacing, or
   divider in a component; add or reuse a token here. See docs/design-language.md.

   Palette direction: C ("Heller / Papier") — light neutral parchment, warm
   taupe-brown controls, restrained coat-gold. No blue anywhere.

   Themes: light is the default (:root). Dark is OPT-IN via
   :root[data-theme="dark"] — deliberately NOT prefers-color-scheme, because the
   map tiles are light and auto-dark panels would clash over them. Wiring a
   toggle is a separate feature; the language only defines the values. */

:root {
	--font-ui: "Faculty Glyphic", "Arial", sans-serif;

	/* Typography scale — 7 rungs, 11px floor (see "Typography" in the doc) */
	--font-size-caption: 11px;  /* labels, pills, meta — the floor */
	--font-size-small: 12px;    /* dense body — the workhorse */
	--font-size-body: 13px;     /* default controls / body */
	--font-size-reading: 14px;  /* comfortable reading */
	--font-size-subhead: 16px;  /* subheaders */
	--font-size-title: 20px;    /* dialog / panel titles */
	--font-size-display: 22px;  /* infobox hero name */
	--leading-tight: 1.15;      /* titles / display */
	--leading-snug: 1.25;       /* controls / labels */
	--leading-normal: 1.45;     /* reading body */
	--font-weight-regular: 400;
	--font-weight-bold: 700;    /* two weights only — no 500 / 600 / 800 */

	/* Surfaces */
	--color-page-bg: #f3f0e8;        /* app canvas behind the panels */
	--color-page-bg-deep: #2b2721;   /* deep surround (editor backdrop) */
	--color-panel: #fffdf9;          /* white card (infobox, route planner) */
	--color-panel-soft: #faf6ee;     /* softly grouped background */
	--color-panel-muted: #f1ece1;    /* muted inset (coat frame, wells) */
	/* The SELECTED row of a list or rail. One step further from the panel than -muted, in the
	   direction that reads as "pressed" in each theme: darker on light, lighter on dark. -muted
	   alone was too close to the panel to find the active row at a glance. */
	--color-panel-active: #e7ddc9;

	/* Text */
	--color-text: #2e271e;
	--color-text-strong: #3c3327;    /* titles, emphasised labels */
	--color-text-muted: #706557;     /* subtitles, captions, meta */
	--color-placeholder: #9a8f7e;    /* input placeholder — lighter than muted */

	/* Lines */
	--color-border: #ddd3c3;         /* hairline around controls */
	--color-border-strong: #cdbfa8;  /* hover / emphasised control edge */
	--color-divider: rgba(125, 115, 96, 0.30); /* section separator — same everywhere */

	/* Button · primary (filled) — the one main action per surface */
	--color-button: #5b5548;
	--color-button-border: #635b4d;
	--color-button-text: #f6efe1;
	--color-button-hover: #6a6353;         /* hover — lighter */
	--color-button-active: #4c473b;        /* pressed — darker */

	/* Button · secondary (soft / outline) — e.g. "Link teilen" */
	--color-button-soft: #efe9db;
	--color-button-soft-text: #564b3b;
	--color-button-soft-border: #cdbda0;
	--color-button-soft-hover: #e7ddc9;
	--color-button-soft-active: #ddd1b9;

	/* Accent = coat-of-arms gold; links in warm gold-brown (NEVER blue) */
	--color-accent: #bfa03a;
	--color-accent-strong: #9c7f22;
	--color-link: #8f7326;
	--color-link-hover: #6f5a1c;

	/* Secondary accent-brown — the WikiSync/label-path-location edit dialogs' own
	   accent (links, active tabs, focus rings), distinct from the app-wide
	   --color-accent-strong gold but from the same warm family. */
	--color-accent-brown: #7a5a3a;
	--color-accent-brown-hover: #5f4429;
	--color-accent-brown-soft: #9a7a5a;
	--color-accent-brown-text: #fff;
	--color-accent-brown-focus: rgba(122, 90, 58, 0.18);

	/* Pills / tags (e.g. publication sources) */
	--color-pill: #f3ecd9;
	--color-pill-border: #d7c7a2;
	--color-pill-text: #675024;

	--color-danger: #9d3a2e;
	--color-success: #2f7d3a;             /* status: success (e.g. contact form) */
	/* Halo around a presence dot (online editor, live visitor count) — the ring that
	   lifts a 9px dot off the panel without giving it a border. */
	--color-success-halo: rgba(79, 159, 74, 0.16);
	--color-muted-halo: rgba(161, 140, 116, 0.16);
	/* Soft status surfaces — the pale tinted fills for accept/reject buttons and status pills in the
	   editor (Meldungen, WikiSync). --color-success/-danger above are the solid text colours; these carry
	   a full bg/border/text set so the buttons follow the theme instead of staying light in dark mode. */
	--color-success-soft: #eef6e2;
	--color-success-soft-border: #a9c07f;
	--color-success-soft-text: #3c5a1c;
	--color-danger-soft: #fbeae6;
	--color-danger-soft-border: #d3a79c;
	--color-danger-soft-text: #8a2d22;
	/* Link status — the reachability marker behind an external link (linkchecker). "online" reuses the
	   success green so the two never drift apart; "offline" is a muted warm grey, NOT a red: a link that
	   has gone is a fact worth noting, not an error the reader can act on. Deliberately not
	   --color-map-presence*, which is pinned identical in both themes because it sits on the always-light
	   map tiles — these markers live in panels and must follow the theme. */
	--color-status-online: var(--color-success);
	--color-status-offline: #8b8478;
	/* Status: warning (amber) — the third status colour next to --color-success/--color-danger,
	   used by the WikiSync + settlement editors (coverage gaps, attribution-required licences,
	   values diverging from the wiki). --color-warning is the solid text/border/dot value;
	   -soft* is the pale filled badge (hint boxes, "Lücke" badges); -strong* is the filled
	   ACTIVE warn chip. */
	--color-warning: #b8860b;
	--color-warning-soft: #faeeda;
	--color-warning-soft-border: #ef9f27;
	--color-warning-soft-text: #854f0b;
	--color-warning-strong: #f4c869;
	--color-warning-strong-text: #4a3300;
	/* Route waypoints — ONE language across map, route planner and infopanel (Owner): every waypoint is
	   red, the destination is a teardrop, and the SELECTED one turns gold-yellow. Red means "waypoint",
	   gold means "selected" — never "which position in the route".
	   These stay the SAME in both themes on purpose: the same mark appears on the always-light map tiles
	   and on the dark panels, and it must read as the same thing in both places. */
	--color-marker-waypoint: #e33b35;      /* heraldic red — matches the red settlement markers */
	--color-marker-waypoint-core: #2e2119; /* the dark "eye" + outline inside the mark */
	--color-marker-waypoint-ring: #dcb877; /* the gold ring (map marker only — invisible below ~16px) */

	/* Review stars — the rating glyphs (infobox summary + write-dialog picker). Warm coat-gold,
	   not a generic yellow; `-muted` is the empty-star track. */
	--color-star: #e0a528;
	--color-star-muted: #d9c7a6;

	/* Active/selected map location — the clicked settlement's marker fills gold-yellow (Owner). Also the
	   SELECTED route waypoint (see above). The marker sits on the always-light map tiles, so the dark
	   value stays the same warm gold. */
	--color-marker-active: #f0b429;

	/* Editor-Markierungswerkzeuge (Discord #25) -- kräftige Warnringe um Marker, je ein Ton pro
	   Befund: pink = "Unverbunden" (gar keine Anbindung), türkis = "Kreuzungen ≤ 2 Wege"
	   (überflüssiger Knoten). Pinned wie --color-marker-waypoint oben: die Ringe sitzen auf den
	   IMMER-hellen Kartenkacheln, nicht auf einem Theme-Panel, also kein Dark-Override. */
	--color-marker-unconnected-ring: #e0559a;
	--color-marker-sparse-crossing-ring: #0fb9b1;
	/* Discord #43 -- bernstein = "offenes Wegende": ein per Strg vom Ort getrenntes Wegende, das noch
	   an nichts haengt. Gleiche Begruendung wie oben (helle Kacheln, kein Dark-Override). Bewusst
	   NICHT --color-accent: das Gold markiert waehrend des Ziehens den Marker, das Bernstein danach
	   die zurueckgebliebene Luecke -- zwei Zustaende, zwei Toene. */
	--color-marker-open-path-end-ring: #e8850c;

	/* "Edit in progress" blue -- the ring of every drag handle on the map (.path-edit-handle-marker__dot
	   in css/features/path-editor.css, used by the path, region and landscape editors). This is one of
	   the two documented no-blue EXCEPTIONS in docs/design-language.md: it encodes a STATE, not chrome,
	   and must not be "corrected" to a warm tone. It is a token so the contour of an area being edited
	   can say the same thing in the same colour instead of writing the literal a second time. Pinned:
	   drawn on the always-light map tiles. */
	--color-edit-handle: #1452f7;

	/* Landschaften (Erprobung), colours per Owner 2026-07-26. All three layers are on at once, so the
	   tones must stay tellable apart -- but they are not three peers: the derographic layer draws
	   administrative CONTAINERS (grey, and unfilled while it rests), topography draws relief, and only
	   vegetation carries real ground cover, which is why it is the one that gets a tone per type
	   instead of a single colour. Pinned in both themes for the same reason as the marker rings above:
	   these are painted ON the always-light map tiles, never on a themed panel. */
	--color-ecosystem-derographisch: #8c8c8c; /* neutral grey -- regions, islands, continents */
	/* Placeholder. The height map (high -> white) replaces this per the concept; until then one
	   brown-grey stands in for the whole relief layer. */
	--color-ecosystem-topographie: #8c7d6e;   /* brown-grey -- mountains, hills, coast, sea */
	/* The fallback for a vegetation region with no type set. The per-type tones below win when the
	   region has one; they are looked up BY RULE from the type_key
	   (--color-ecosystem-vegetation-<type_key with _ as ->), so a newly seeded type needs a token here
	   and nothing else -- there is no list of them in the client to keep in sync. */
	--color-ecosystem-vegetation: #5f7d33;
	--color-ecosystem-vegetation-wald: #3f6b2c;             /* dense forest */
	--color-ecosystem-vegetation-auenlandschaft: #6f9c4e;   /* floodplain, lighter and fresher */
	--color-ecosystem-vegetation-graslandschaft: #93ad55;   /* grassland */
	--color-ecosystem-vegetation-steppe: #b0a052;           /* dry steppe, yellowing */
	--color-ecosystem-vegetation-wueste: #d8bd7e;           /* desert sand */
	--color-ecosystem-vegetation-suempfe-moore: #4d5a3b;    /* swamp and moor, murky */
	--color-ecosystem-vegetation-tundra: #93a48f;           /* tundra, cold and pale */
	/* Selection contour (Owner 2026-07-26): a SELECTED area is outlined in white, an area whose corners
	   are open for editing in the handle blue above. Two states, two contours -- the same principle as
	   the two marker rings further up, and the reason the fill keeps its own tone in both cases: the
	   colour says "which area", the contour says "what can I do with it". White because it reads on
	   every one of the ten ground tones below/above it; pinned for the usual reason (light tiles). */
	--color-ecosystem-selected-outline: #ffffff;

	/* Modal scrim (behind centred dialogs) */
	--color-scrim: rgba(38, 28, 16, 0.5);

	/* Editor dialog overlays (report/edit/wiki-sync/path/powerline/label/region) — a
	   darker, denser scrim than --color-scrim above. Pinned: same in both themes. */
	--color-scrim-dialog: rgba(20, 16, 12, 0.56);
	/* Full-bleed territory editor overlay — stronger still, paired with backdrop blur. */
	--color-scrim-editor: rgba(20, 16, 12, 0.6);
	/* Spotlight search overlay — lighter + blurred, keeps the map visible behind it. */
	--color-scrim-light: rgba(18, 15, 12, 0.34);
	/* Spoiler lid on a Kartensammlung card (Spec §3.7). Unlike every scrim above it does not sit BEHIND a
	   dialog but ON a card, over already-blurred content: dense enough that the title underneath stays
	   unreadable, light enough to read as a lid rather than a hole. Pinned + its own text colour: it
	   always covers card content and always carries light text, so a themed --color-text-strong would go
	   dark-on-dark in the light theme. */
	--color-scrim-spoiler: rgba(20, 16, 12, 0.62);
	--color-scrim-spoiler-text: #f4ece0;

	/* Territory-editor sticky header — translucent panel + backdrop-filter blur
	   so scrolled content shows through faintly. */
	--color-panel-translucent: rgba(255, 253, 249, 0.96);

	/* Travel-speed tiers — the functional ampel in the speed-matrix dialog. A data
	   highlight (not chrome), deliberately identical in both themes. */
	--color-tier-fast-bg: #e2edcf;
	--color-tier-fast-text: #27500a;
	--color-tier-mid-bg: #f6e6c9;
	--color-tier-mid-text: #6b3d07;
	--color-tier-slow-bg: #f6dede;
	--color-tier-slow-text: #791f1f;

	/* Territory-editor "on map" presence indicator (tree/legend swatch ring). A
	   data highlight (not chrome), deliberately identical in both themes. */
	--color-map-presence: #6a7f3a;
	--color-map-presence-text: #2f6b3a; /* darker text variant of the above, same pinning rule */

	/* Territory-assignment picker (parent-tree/tabs/breadcrumb "active" rows) —
	   translucent white overlays that sit ONLY on the --color-button solid fill,
	   never on a page surface. --color-button stays mid-dark in both themes, so
	   these are deliberately identical in both (no dark override needed). */
	--color-on-button-muted: rgba(255, 255, 255, 0.8);    /* secondary/meta text on the fill */
	--color-on-button-hairline: rgba(255, 255, 255, 0.25); /* faint divider/chip-bg on the fill */

	/* Interaction & focus (see "Button states" in the doc) */
	--color-focus: rgba(191, 160, 58, 0.45);      /* gold focus glow */
	--focus-ring: 0 0 0 3px var(--color-focus);   /* compose with the element's shadow, don't replace it */
	--color-hover-wash: rgba(191, 160, 58, 0.14); /* row / option hover */
	--color-active-wash: rgba(191, 160, 58, 0.24);/* selected row */
	--color-check-accent: var(--color-accent-strong); /* checkbox/radio checked mark + border */
	--color-check-fill: var(--color-active-wash);      /* checkbox/radio checked fill */
	--color-disabled-bg: #ece7dd;
	--color-disabled-text: #a99f8e;
	--color-disabled-border: #dcd3c4;

	/* Scrollbars — thin, theme-aware track/thumb (Firefox scrollbar-color + WebKit
	   pseudo-elements), applied globally in base.css. */
	--color-scrollbar-thumb: rgba(141, 121, 98, 0.4);
	--color-scrollbar-thumb-hover: rgba(141, 121, 98, 0.6);
	--color-scrollbar-track: transparent;

	/* Spacing scale — value-named steps; use a token, never a stray px */
	/* Owner: alle Spacing-Vars global +2px (mehr Luft überall). Die Namen (2/4/6/…)
	   bleiben als Skala-Stufen; die WERTE tragen +2. App-weit + reversibel. */
	--space-2: 4px;
	--space-4: 6px;
	--space-6: 8px;
	--space-8: 10px;
	--space-10: 12px;
	--space-12: 14px;
	--space-16: 18px;
	--space-20: 22px;
	--space-24: 26px;

	/* Radius — 3 rungs; the old 4/6/7/9 fold to the nearest (controls → md) */
	--radius-sm: 5px;   /* mirrored panel shell + tiniest chips */
	--radius-md: 8px;   /* all controls: buttons, inputs, selects, pills, rows */
	--radius-lg: 10px;  /* menus, cards, autocomplete */

	/* Divider rhythm — symmetric space above & below a section line (on-scale) */
	--divider-gap: var(--space-12);       /* reading sections (infobox) */
	--divider-gap-tight: var(--space-6);  /* dense control groups (route planner) */

	/* Icon sizes — one scale for UI glyphs (sm/md) AND the existing colour
	   imagery (lg..hero: transport, type toggles, coats) so sizes stop drifting */
	--icon-sm: 16px;    /* dense inline glyph */
	--icon-md: 20px;    /* standard UI glyph */
	--icon-lg: 24px;    /* inline content icon — transport mode */
	--icon-xl: 46px;    /* map-display type toggle — fills the wider 350px route-planner cell */
	--icon-2xl: 48px;   /* infobox type icon (coat fallback) */
	--icon-hero: 130px; /* coat / logo hero */

	/* Elevation */
	--shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.16);
	--shadow-dialog: 0 20px 45px rgba(0, 0, 0, 0.38);
	/* Button hover lift — warm brown drop, one step stronger for the filled main action. Matches the
	   route-planner buttons (which still inline these values; migrate them to these tokens later). */
	--shadow-button-hover: 0 4px 10px rgba(52, 41, 32, 0.14);
	--shadow-button-hover-strong: 0 5px 12px rgba(52, 41, 32, 0.22);

	--z-map-ui: 1000;
	--z-dialog: 1450;
	--z-dialog-high: 1460;
	/* Editor overlays (the iframe tools: territory, settlement, adventure, citymap, wiki-sync).
	   Above --z-dialog-high so an editor overlay always clears the map context menu sitting there. */
	--z-editor-overlay: 1500;
	/* A dialog opened FROM an editor overlay ("Alle anzeigen") — must clear --z-editor-overlay. */
	--z-dialog-over-editor: 3000;
	/* Typeahead dropdowns. Must clear --z-editor-overlay: the source autocomplete opens from an
	   add-row that lives INSIDE the editor overlays. Also carries the route planner's jQuery-UI
	   menu (.ui-autocomplete), which must out-rank jquery-ui.css's .ui-front (z-index: 100). */
	--z-autocomplete: 1600;
	--z-modal: 5000; /* full-screen modal overlay — above --z-autocomplete */
}

/* Dark theme — opt-in (set data-theme="dark" on :root). Same warm family,
   deep parchment-brown canvas, cream text; the gold is lightly desaturated
   (~12% less than the light gold) so it stays calm on dark instead of shouting. */
:root[data-theme="dark"] {
	--color-page-bg: #211f19;
	--color-page-bg-deep: #181611;
	--color-panel: #312e26;
	--color-panel-soft: #37342b;
	--color-panel-muted: #39352b;
	/* Lighter than the panel here -- the same "pressed" reading, mirrored for dark. */
	--color-panel-active: #4c4636;

	--color-text: #eee7da;
	--color-text-strong: #f5f0e4;
	--color-text-muted: #b4a895;
	--color-placeholder: #7b7467;

	--color-border: #514a3c;
	--color-border-strong: #615a49;
	--color-divider: rgba(207, 197, 171, 0.24);

	--color-button: #6b6456;
	--color-button-border: #7a7361;
	--color-button-text: #f5ebd7;
	/* Hover geht hier DUNKLER, anders als im hellen Thema. Auf dunklem Grund steht
	   cremefarbene Schrift auf dem Knopf: ein hellerer Hover senkt den Kontrast, statt
	   ihn zu heben. Der alte Wert #797264 lag bei 4,03:1 gegen --color-button-text und
	   damit unter WCAG AA (4,5) -- sichtbar an jeder Sync-Kachel. Jetzt 6,05:1.
	   Die 1px-Anhebung und der staerkere Schatten tragen das Hover-Signal. */
	--color-button-hover: #5e5749;
	/* Muss mitwandern: der bisherige Wert #5d5648 lag praktisch auf dem neuen Hover
	   und waere nicht mehr davon zu unterscheiden gewesen. Jetzt 7,46:1. */
	--color-button-active: #4f4a3d;

	--color-button-soft: #3a362c;
	--color-button-soft-text: #eae1cf;
	--color-button-soft-border: #585142;
	--color-button-soft-hover: #453f32;
	--color-button-soft-active: #4e4739;

	--color-accent: #cfb767;
	--color-accent-strong: #dcc77e;
	--color-link: #d7c38b;
	--color-link-hover: #e3d39f;

	--color-accent-brown: #c9a97e;
	--color-accent-brown-hover: #dcbe97;
	--color-accent-brown-soft: #a3835c;
	--color-accent-brown-text: #241d14;
	--color-accent-brown-focus: rgba(201, 169, 126, 0.25);

	--color-pill: #3b3522;
	--color-pill-border: #5c5237;
	--color-pill-text: #e7d7a5;

	--color-danger: #d27566;
	--color-success: #7cc48a;
	--color-success-halo: rgba(124, 196, 138, 0.22);
	--color-muted-halo: rgba(180, 168, 149, 0.20);
	--color-success-soft: #2c3a24;
	--color-success-soft-border: #4d6b3a;
	--color-success-soft-text: #9cd39a;
	--color-danger-soft: #3f2a26;
	--color-danger-soft-border: #6b463f;
	--color-danger-soft-text: #e29c8f;
	--color-warning: #e0b45c;
	--color-warning-soft: #3b3122;
	--color-warning-soft-border: #6d5629;
	--color-warning-soft-text: #e9c684;
	--color-warning-strong: #c79a3c;
	--color-warning-strong-text: #241d14;
	/* Link status, dark: the muted grey lifts so it stays legible on the deep panel. --color-status-online
	   needs no override -- it is var(--color-success), which is re-pointed just above. */
	--color-status-offline: #9a9184;
	/* No dark override for the waypoint marks (or the --color-marker-*-ring editor marks below) on
	   purpose -- the SAME mark appears on the always-light map tiles and on the dark panels; a
	   theme-shifted red would make the planner (or the editor) disagree with the map. */

	--color-panel-translucent: rgba(49, 46, 38, 0.96);

	/* Review stars, dark: the gold stays warm; the empty track darkens so it doesn't glare on the
	   deep panel (a light beige track would read almost as bright as a filled star). */
	--color-star: #e6b850;
	--color-star-muted: #6f6552;
	--color-marker-active: #f0b429;

	--color-focus: rgba(207, 183, 103, 0.5);
	--color-hover-wash: rgba(207, 183, 103, 0.18);
	--color-active-wash: rgba(207, 183, 103, 0.30);
	/* Checkbox/radio checked, dark: the gold read as muddy + too yellow (owner). Use a
	   markedly desaturated gold and a solid subtle fill instead of the translucent wash. */
	--color-check-accent: #aaa598;
	--color-check-fill: var(--color-panel-soft);
	--color-disabled-bg: #322f27;
	--color-disabled-text: #6e685c;
	--color-disabled-border: #433e33;

	/* Scrollbars, dark: same warm-brown family as --color-text-muted, lightened so the
	   thumb still shows up against the deep panel. */
	--color-scrollbar-thumb: rgba(180, 168, 149, 0.35);
	--color-scrollbar-thumb-hover: rgba(180, 168, 149, 0.55);

	--shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.45);
	--shadow-dialog: 0 20px 45px rgba(0, 0, 0, 0.6);
	--shadow-button-hover: 0 4px 10px rgba(0, 0, 0, 0.38);
	--shadow-button-hover-strong: 0 5px 12px rgba(0, 0, 0, 0.5);
}