/* ==========================================================================
   Libretto design tokens — vendored verbatim from car-tco's
   web/resources/static/libretto.css `@layer tokens` block (source of truth
   for the real, currently-shipping app). Re-copy from there to refresh; do
   not hand-edit values here.
   ========================================================================== */
@layer tokens {
:root {
	color-scheme: light dark;

	/* ── Type ────────────────────────────────────────────── */
	--font-serif: "Playfair Display Variable", "Playfair Display", Georgia, "Times New Roman", serif;
	--font-sans:  "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	/* ── Surfaces (paper light / warm-ink dark) ──────────── */
	--surface:          light-dark(#faf9f5, #14130f);  /* page */
	--surface-raised:   light-dark(#ffffff, #1c1b16);  /* cards, modals */
	--surface-sunken:   light-dark(#f1efe8, #100f0b);  /* table head, wells */
	--bg:               var(--surface);                /* legacy alias */
	--bg-2:             color-mix(in oklab, var(--ink) 3%, transparent);
	--bg-3:             color-mix(in oklab, var(--ink) 4.5%, transparent);

	/* Surface tints — flip automatically because --ink flips with theme */
	--tint-xs:          color-mix(in oklab, var(--ink) 4%,  transparent);
	--tint-sm:          color-mix(in oklab, var(--ink) 7%,  transparent);
	--tint-md:          color-mix(in oklab, var(--ink) 12%, transparent);
	--tint-lg:          color-mix(in oklab, var(--ink) 20%, transparent);

	/* Dark scrims — always darken */
	--scrim-xs:         color-mix(in oklab, #000 5%,  transparent);
	--scrim-sm:         color-mix(in oklab, #000 10%, transparent);
	--scrim-md:         color-mix(in oklab, #000 18%, transparent);
	--scrim-lg:         color-mix(in oklab, #000 35%, transparent);

	/* ── Ink / text ──────────────────────────────────────── */
	--ink:              light-dark(#1b1815, #ece8df);
	--text:             var(--ink);
	--text-1:           var(--ink);
	--text-2:           light-dark(#3d3833, #c9c4b8);
	--text-3:           light-dark(#574f46, #a39d90);
	--text-4:           light-dark(#6a645a, #918a7e);
	--text-5:           light-dark(#726c60, #8d8574); /* WCAG AA: >=4.5:1 against --surface, both schemes */

	/* ── Borders ─────────────────────────────────────────── */
	--border:           color-mix(in oklab, var(--ink) 13%, transparent);
	--border-subtle:    color-mix(in oklab, var(--ink) 7%,  transparent);

	/* ── Accent (cultured forest) ────────────────────────── */
	--accent:           light-dark(#1f4d3a, #6fb894);
	--accent-ink:       light-dark(#faf9f5, #11130f);  /* text on accent fill */
	--accent-glow:      color-mix(in oklab, var(--accent) 16%, transparent);
	--accent-soft:      color-mix(in oklab, var(--accent) 9%,  transparent);

	/* ── Cost category colors (recalibrated, muted-editorial) ── */
	--clr-buy:          light-dark(#2f5e8c, #7fb0dc);
	--clr-sell:         light-dark(color-mix(in oklab, #2e7d52 84%, #000), #6fcb97);
	/* Light-mode slots are darkened (hue kept) so the colours clear 4.5:1 as
	   small text on paper; dark-mode slots already pass on the warm-ink ground. */
	--clr-service:      light-dark(color-mix(in oklab, #b6792a 74%, #000), #e0b062);
	--clr-repair:       light-dark(color-mix(in oklab, #b3423a 90%, #000), #e08b82);
	--clr-upgrade:      light-dark(color-mix(in oklab, #2a7e8c 84%, #000), #6fc2ce);
	--clr-asset:        light-dark(#6a4e9c, #b79fe0);
	--clr-fixed:        light-dark(color-mix(in oklab, #c2622e 80%, #000), #e89e6b);
	--clr-fuel:         light-dark(color-mix(in oklab, #b89134 70%, #000), #e3c768);

	--clr-buy-bg:       color-mix(in oklab, var(--clr-buy) 10%, transparent);
	--clr-buy-border:   color-mix(in oklab, var(--clr-buy) 26%, transparent);
	--clr-sell-bg:      color-mix(in oklab, var(--clr-sell) 10%, transparent);
	--clr-sell-border:  color-mix(in oklab, var(--clr-sell) 26%, transparent);
	--clr-service-bg:   color-mix(in oklab, var(--clr-service) 10%, transparent);
	--clr-service-border: color-mix(in oklab, var(--clr-service) 26%, transparent);
	--clr-repair-bg:    color-mix(in oklab, var(--clr-repair) 10%, transparent);
	--clr-repair-border: color-mix(in oklab, var(--clr-repair) 26%, transparent);
	--clr-upgrade-bg:   color-mix(in oklab, var(--clr-upgrade) 10%, transparent);
	--clr-upgrade-border: color-mix(in oklab, var(--clr-upgrade) 26%, transparent);
	--clr-asset-bg:     color-mix(in oklab, var(--clr-asset) 10%, transparent);
	--clr-asset-border: color-mix(in oklab, var(--clr-asset) 26%, transparent);
	--clr-fuel-bg:      color-mix(in oklab, var(--clr-fuel) 10%, transparent);
	--clr-fuel-border:  color-mix(in oklab, var(--clr-fuel) 26%, transparent);

	/* ── Energieetikette A–G (§107/§109) ─────────────────────
	   The official label's green→red ramp, kept for RECOGNITION — that sequence
	   is the whole reason a drawn A–G bar reads instantly — but put through the
	   same treatment the cost categories got: the light slot is darkened via
	   color-mix so a letter on the band clears 4.5:1 on paper, and the dark slot
	   is lifted so it clears on warm ink. Do not restore the raw saturated
	   values; they would be the only unmuted thing in the system and would fail
	   contrast as small text.
	   --clr-eff-ink is the letter colour ON a band: near-black in both schemes,
	   because these bands stay light-ish at both ends of the ramp. */
	--clr-eff-a:        light-dark(color-mix(in oklab, #2e7d32 82%, #000), #6fc98a);
	--clr-eff-b:        light-dark(color-mix(in oklab, #5f9e34 82%, #000), #a2cf6a);
	--clr-eff-c:        light-dark(color-mix(in oklab, #9cb02f 76%, #000), #cfd964);
	--clr-eff-d:        light-dark(color-mix(in oklab, #d0a92b 74%, #000), #ecd06a);
	--clr-eff-e:        light-dark(color-mix(in oklab, #dd8a26 76%, #000), #f0b06d);
	--clr-eff-f:        light-dark(color-mix(in oklab, #d95f27 80%, #000), #ef9270);
	--clr-eff-g:        light-dark(color-mix(in oklab, #c62828 86%, #000), #ea7d7d);
	--clr-eff-ink:      light-dark(#faf9f5, #14130f);

	/* ── Summary / result values ─────────────────────────── */
	--clr-tco:          var(--clr-sell);
	--clr-profit:       var(--clr-sell);
	--clr-cost:         var(--clr-repair);
	--clr-warn:         var(--clr-service);
	--clr-highlight:    var(--accent);
	--critical:         light-dark(#b3261e, #f2998f);  /* overdue / MFK red */

	/* ── Named color aliases ─────────────────────────────── */
	--clr-green:        var(--clr-sell);
	--clr-orange:       var(--clr-service);
	--clr-red:          var(--clr-repair);

	/* ── Legacy alias tokens (previously undefined → hardcoded fallbacks) ── */
	--clr-accent:         var(--accent);
	--clr-accent-subtle:  var(--accent-soft);
	--color-primary:      var(--accent);
	--text-primary:       var(--text);
	--text-secondary:     var(--text-2);
	--text-muted:         var(--text-4);
	--surface-1:          var(--surface-raised);

	/* ── Modal / dialog / tooltip ────────────────────────── */
	--modal-content-bg: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
	--modal-border:     var(--border);
	--tooltip-bg:       #211f19;
	--tooltip-border:   color-mix(in oklab, #fff 12%, transparent);
	--tooltip-text:     #ece8df;

	/* ── Import preview surfaces ─────────────────────────── */
	--surface-2:        var(--tint-xs);
	--surface-3:        var(--tint-sm);

	/* ── Radius ──────────────────────────────────────────── */
	--radius-card:      10px;
	--radius-control:   7px;
	--radius-pill:      999px;

	/* ── Elevation (shadows) ─────────────────────────────── */
	/* Warm scrim-based so they read on paper (light) and warm-ink (dark). */
	--shadow-lg:    0 12px 40px var(--scrim-lg);
	--shadow-modal: 0 25px 50px -12px var(--scrim-lg), 0 0 0 1px var(--tint-sm) inset;

	/* ── Modal geometry (single source of truth for header/body/footer) ──── */
	--modal-pad-x: clamp(1.25rem, 3vw, 2rem);
	--modal-pad-y: 1.5rem;

	/* ── Animation timing ────────────────────────────────── */
	--timing-fast:   150ms;
	--timing-base:   250ms;
	--timing-slow:   400ms;
	--timing-slower: 600ms;
	--ease-out:      cubic-bezier(0.33, 1, 0.68, 1);
	--ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
	--ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Theme override: with no attribute the page follows the OS (color-scheme:
   light dark, above); an explicit choice from the header toggle pins the
   scheme so every light-dark() token flips to match. Set on <html> before
   paint by the inline script in Layout, so there's no flash. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
}