/* Sunroof design tokens: "The Horizon".
   Every colour, size and duration in the app comes from here. No hex codes or
   magic numbers anywhere else.

   Two schemes, light and dark, chosen by the sky engine (js/sky.js) from the real
   sun times at the house, not from the device setting. The engine sets
   data-scheme on <html> and overrides --sky-top / --sky-bottom continuously
   through the day. The values below are the midday and midnight defaults, and
   the device setting is only the fallback before JavaScript has run. */

:root,
[data-scheme="light"] {
  color-scheme: light;

  /* Sky field (top of the Now column and page backdrop). Engine-driven. */
  --sky-top: #bfddf7;
  --sky-bottom: #f2f6fa;

  /* Ground and surfaces */
  --ground: #f2f6fa;          /* page below the horizon */
  --surface: #ffffff;         /* time strip, panels */
  --surface-2: #e9eff5;       /* inset wells, segmented-control track */
  --line: rgb(15 26 42 / 0.12);
  --line-strong: rgb(15 26 42 / 0.28);

  /* Ink */
  --ink: #0f1a2a;
  --ink-2: #46566b;           /* secondary text on ground and surface only */
  --on-sky-2: rgb(15 26 42 / 0.8); /* secondary text on the sky: ink-tinted, never grey */
  --ink-inverse: #ffffff;

  /* Meaning. Amber is the sun and solar power, and is never used for text.
     Blue is grid, price and stored energy. Red appears only when money is
     being lost or something has failed. */
  --sun: #f6a609;
  /* The sun's glow and the solar history area are amber falling off to clear
     (opacities of --sun), so light reads as light rather than a flat tint. */
  --sun-glow-core: 0.5;
  --sun-glow-mid: 0.2;
  --solar-fill-top: 0.55;
  --solar-fill-bottom: 0.08;
  --solar-flow: #16834a;
  --blue: #2f7dd1;            /* fills and strokes */
  --blue-text: #1f64b0;       /* blue when it has to be read as text */
  /* Timeline preview: a soft glow behind the diagram, never a box (owner ruling 2026-09-24). */
  --preview-glow-forecast: color-mix(in srgb, var(--blue) 24%, transparent);
  --preview-glow-history: color-mix(in srgb, var(--sun) 16%, transparent);
  --green: #1e7d45;           /* cheap power: the price chart only (owner ruling 2026-09-23) */
  --green-text: #1b6f3d;
  --gain-text: #2a4238; /* Terse day gains: muted, readable against twilight. */
  --price-tint: 50%;          /* strength of the lighter price-bar tones */
  --price-tint-neutral: 50%;  /* strength of the grey (neutral) price bars */
  --loss: #c8372d;
  --loss-soft: #fbe9e7;
  --warn-soft: #fdf0d2;
  --track: #dde6ee;           /* gauge track, skeletons */
  --focus: #1f64b0;
  --selection: rgb(47 125 209 / 0.22);
  --scrim: rgb(15 26 42 / 0.32);
  --soc-low: #c96f7b;
  --soc-mid: #2f7dd1;
  --soc-high: #269d86;
  --lane-wash-opacity: 0.3;
  --charge-window-opacity: 0.07; /* the car's charging window across both lanes */
  --lane-hatch-opacity: 0.55; /* assumed-level hatch: reads weaker than the solid wash + line */
  /* The battery outlook: a quiet hatched area under the dotted "most likely"
     line (--outlook-hatch-opacity, on the pattern's diagonal strokes), and a
     stronger solid wash for the low–high range layered on top of it
     (--outlook-wash-opacity) — both quieter than the charge-level fill's own
     solid wash above. */
  --outlook-hatch-opacity: 0.4;
  --outlook-wash-opacity: 0.24;
  --shadow: 0 1px 2px rgb(15 26 42 / 0.06), 0 8px 24px -8px rgb(15 26 42 / 0.14);

  /* Type: one family. The system face is deliberate: every device that opens
     Sunroof is Apple, SF has true tabular figures, and the NAS serves no
     third-party requests. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: 3.625rem;      /* the live figure */
  --t-display-wide: 4.5rem;
  --t-title: 1.4375rem;       /* the verdict sentence */
  --t-data: 1.25rem;          /* readings */
  --t-head: 1.0625rem;
  --t-body: 0.9375rem;
  --t-small: 0.8125rem;
  --t-label: 0.6875rem;       /* tracked small caps */
  /* SVG type uses user units in the 390 × 384 viewBox, so these px values
     deliberately scale with the drawing rather than the browser root. */
  --svg-figure: 58px;
  --svg-phrase: 13px;
  --svg-value: 16px;
  --svg-label: 11.5px;
  --svg-state: 11.5px;
  --svg-total: 11.5px;
  --track-label: 0.09em;
  --track-display: -0.03em;
  --w-regular: 450;
  --w-medium: 550;
  --w-bold: 700;
  --lh-tight: 1.15;
  --lh-body: 1.45;

  /* Space: 4 px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --gutter: var(--s-5);
  --tap: 2.75rem;             /* minimum touch target, 44 px */

  /* Shape */
  --r-pill: 999px;
  --r-panel: 0.875rem;
  --r-small: 0.5rem;
  --stroke: 1.5px;            /* drawn linework: arc, icons, outlines */
  --stroke-heavy: 2px;        /* the NOW line */
  --label-halo: 3px;          /* surface-coloured outline behind in-chart labels, so a label stays legible where it crosses a line */

  /* Line style carries state; colour never does it alone.
     solid = live, dashed = idle, dotted = planned (not connected yet), gap = capped. */
  --dash-idle: 6 6;
  --dash-idle-gap: 6;         /* dash offset that starts a dashed line on its gap (no dash against a solid end) */
  --dash-planned: 1 7;
  --dash-arc: 1 7;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-value: 180ms;           /* number cross-fades */
  --d-ui: 240ms;              /* tabs, panels, controls */
  --d-scheme: 1200ms;         /* dusk and dawn scheme change */

  /* Missing from the decided set: the loading skeleton's pulse cycle. */
  --d-skeleton: 1.6s;

  /* Stacking: every fixed-position overlay takes its z-index from here, so
     their relative order stays a deliberate choice as more are added rather
     than a pile of unrelated magic numbers. Low to high. */
  --z-float-panel: 1;   /* a card's own anchored disclosure (e.g. the car detail panel) */
  --z-header: 2;
  --z-tab-bar: 5;
  --z-node-card: 10;     /* above the strip's z-index 2–3 layers and gauges, below dialogs */
  --z-scrim: 19;
  --z-dialog: 20;        /* Control/Log slide-overs */
  --z-popover: 1000;     /* the help popover, above everything */

  /* Layout */
  --bp-mid: 45rem;            /* 720 px: two columns */
  --col-control: 19rem;
  --col-log: 20rem;
  --page-max: 93.75rem;
  --bp-wide: 73.75rem;        /* 1180 px: enough room for the three columns */
  --arc-max-width: 30rem;
  --sky-height: 20.5rem;
  --strip-chart-height: 12rem;  /* phone: room for buy-over-sell prices with numbers */
  --strip-axis-h: calc(var(--t-label) + 10px); /* one label line, tick and ~6 px breathing room */
  --strip-readout-h: var(--strip-axis-h); /* readout overlays this axis row */
  --strip-height: calc(var(--strip-chart-height) + var(--lanes-height) + var(--strip-readout-h));
  --lane-height: 2.75rem;
  --lane-gap: var(--s-2);
  --lanes-height: calc(var(--lane-height) * 2 + var(--lane-gap));
  --lane-hatch-spacing: 4px;  /* assumed-level hatch tile: kept in px so the pattern tiles at exact device pixels */
  --header-overlay-h: calc(var(--tap) + var(--s-5));
  /* Wide-landscape budget (layout.css). The header band is a fixed height so
     the grid can reserve it without measuring: status inset + clearance for
     the iPadOS status-bar blur + one row of 44 px controls. The timeline
     band is viewport-relative, bounded so a 13" iPad doesn't get a
     cavernous chart and an iPad mini still gets a real one. */
  --wide-status-clearance: var(--s-5);
  --wide-header-h: calc(env(safe-area-inset-top, 0px) + var(--wide-status-clearance) + 3rem);
  --wide-strip-h: clamp(15rem, 34dvh, 24rem);  /* half of it is the charge lanes; the other half carries prices with numbers inside the bars */
  --wide-verdict-h: calc(3 * var(--t-small) * var(--lh-body) + 3 * var(--s-2));  /* three caption lines (plus room for the inline icon on the first): the row never resizes, so the diagram above never jumps */
  --strip-pill-top: 0.375rem;
  --strip-pill-h: 1.75rem;

  /* Missing from the decided set: the device gauges need one more size, the
     pill track's height (spec: "14 px tall"). 0.875rem = 14px at the root. */
  --gauge-track-h: 0.875rem;
  --gauge-chevron: 1.25rem;
}

/* Dark scheme: after dusk, before dawn. Works on any element so the gallery can
   show both schemes side by side. */
[data-scheme="dark"] {
  color-scheme: dark;
  --sky-top: #0a1322;
  --sky-bottom: #121e33;
  --ground: #0e1828;
  --surface: #152238;
  --surface-2: #1c2b45;
  --line: rgb(234 240 248 / 0.14);
  --line-strong: rgb(234 240 248 / 0.32);
  --ink: #eaf0f8;
  --ink-2: #a9b7cb;
  --on-sky-2: rgb(234 240 248 / 0.8);
  --ink-inverse: #0f1a2a;
  --sun: #ffb938;
  --sun-glow-core: 0.55;
  --sun-glow-mid: 0.22;
  --solar-fill-top: 0.6;
  --solar-fill-bottom: 0.04;
  --solar-flow: #65d99a;
  --blue: #5aa2f0;
  --blue-text: #8cc0ff;
  --green: #4cc38a;
  --green-text: #7fdcaa;
  --gain-text: #9bb5a7; /* Below the night sky's secondary ink in luminance. */
  --price-tint: 62%; /* over navy, a weaker mix turns red to maroon and green to forest */
  --price-tint-neutral: 42%; /* grey stays quieter than the coloured tones */
  --loss: #ff7a6e;
  --loss-soft: #3a1c1f;
  --warn-soft: #3a2e14;
  --track: #22314a;
  --focus: #8cc0ff;
  --selection: rgb(90 162 240 / 0.3);
  --scrim: rgb(0 0 0 / 0.5);
  --soc-low: #e68b98;
  --soc-mid: #5aa2f0;
  --soc-high: #58cbb2;
  --lane-wash-opacity: 0.18;
  --charge-window-opacity: 0.09;
  --lane-hatch-opacity: 0.3; /* assumed-level hatch: its thin bright strokes must average below the 0.18 wash, or a real reading looks like a hole */
  --outlook-hatch-opacity: 0.32;
  --outlook-wash-opacity: 0.18;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-ui: 1ms;
    --d-scheme: 1ms;
  }
}