/* SolarScope studio design tokens (premium UI pass, 2026-11-09).
   Shared by the logged-in Site Studio (templates/site_studio.html) and the logged-out demo (templates/studio_demo.html).
   Load BEFORE every other studio stylesheet. All names start with --st-. Light values on :root; dark values when the
   theme toggle puts .dark-mode on <html>/<body> (static/js/theme_toggle.js) or [data-theme="dark"] is set.
   Rules: 4/8 px spacing grid, one secondary text colour (--st-text-2), accents used sparingly, 1 px low-opacity borders,
   very soft shadows. The token contract is documented in /home/deploy/reports/solarscope-premium-ui-spec-2026-11-09.md. */

:root {
    /* ---- type ---- */
    --st-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --st-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --st-fs-xs: 11px;      /* all-caps section labels, tiny counters only */
    --st-fs-sm: 12px;      /* secondary text: metadata, captions, sources, coordinates */
    --st-fs-md: 13px;      /* body, controls, list rows */
    --st-fs-lg: 14px;      /* emphasised body: row values, AI analyst prose */
    --st-fs-h: 16px;       /* the one heading size (site name, card titles) */
    --st-fs-display: 22px; /* the verdict line and metric numbers: what should dominate */
    --st-fw-regular: 400; --st-fw-medium: 500; --st-fw-semibold: 600;
    --st-lh-tight: 1.25; --st-lh: 1.5; --st-lh-prose: 1.6;
    --st-tracking-caps: .05em;   /* all-caps labels: 11px / 500 / this tracking / --st-text-2 */
    --st-tracking-tight: -.012em; /* headings and big numbers */

    /* ---- spacing (4/8 grid) ---- */
    --st-sp-1: 4px; --st-sp-2: 8px; --st-sp-3: 12px; --st-sp-4: 16px; --st-sp-5: 20px; --st-sp-6: 24px; --st-sp-8: 32px;

    /* ---- radii ---- */
    --st-r-xs: 4px; --st-r-sm: 6px; --st-r-md: 8px; --st-r-lg: 12px; --st-r-pill: 999px;

    /* ---- control sizes ---- */
    --st-h-ctl: 32px;      /* buttons, inputs, icon buttons (hit area) */
    --st-h-ctl-sm: 28px;   /* chips, small buttons */
    --st-ic: 16px;         /* icon glyph size; stroke icons use --st-ic-stroke */
    --st-ic-sm: 14px;
    --st-ic-stroke: 1.75;

    /* ---- surfaces (elevation steps, lowest to highest) ---- */
    --st-canvas: #F4F4F2;       /* app background behind everything */
    --st-panel: #FAFAF9;        /* side panels: slightly recessed next to the map */
    --st-surface: #FFFFFF;      /* cards on a panel, floating cards over the map, menus */
    --st-fill: #F2F2F0;         /* quiet fill: chips, metric tiles, inputs, track backgrounds */
    --st-fill-hover: #EAEAE7;   /* hover / pressed on a fill or on a transparent control */
    --st-fill-strong: #DFDFDB;  /* switch track off, slider track */

    /* ---- borders ---- */
    --st-border: rgba(18, 20, 26, .08);        /* default 1 px hairline: cards, panel edges, separators */
    --st-border-strong: rgba(18, 20, 26, .14); /* inputs, chips, hover outline */

    /* ---- text ---- */
    --st-text: #17191E;     /* primary */
    --st-text-2: #5B606B;   /* THE secondary colour (meta, coordinates, sources, labels); 6.3:1 on white */
    --st-text-3: #8C919B;   /* placeholders, disabled, decorative only (not for information) */
    --st-text-on-accent: #FFFFFF;

    /* ---- accent (brand orange, desaturated) ---- */
    --st-accent: #DE6547;
    --st-accent-hover: #CC5639;
    --st-accent-soft: rgba(222, 101, 71, .09);
    --st-accent-line: rgba(222, 101, 71, .24);
    --st-accent-ink: #B4472C;  /* accent text on light backgrounds */

    /* ---- status (soft background + strong text; dot = solid) ---- */
    --st-good: #2E8B5E;  --st-good-soft: rgba(46, 139, 94, .08);  --st-good-line: rgba(46, 139, 94, .20);  --st-good-ink: #226E49;
    --st-warn: #BD8526;  --st-warn-soft: rgba(189, 133, 38, .09); --st-warn-line: rgba(189, 133, 38, .24); --st-warn-ink: #8C6014;
    --st-bad:  #C2484C;  --st-bad-soft:  rgba(194, 72, 76, .08);  --st-bad-line:  rgba(194, 72, 76, .22);  --st-bad-ink:  #A0353A;
    --st-info: #4C6A9E;  --st-info-soft: rgba(76, 106, 158, .08); --st-info-line: rgba(76, 106, 158, .22); --st-info-ink: #3B5585;
    --st-neutral-soft: rgba(18, 20, 26, .05);

    /* ---- elevation (very soft) ---- */
    --st-shadow-1: 0 1px 2px rgba(16, 18, 24, .04);                                        /* cards on a panel */
    --st-shadow-2: 0 1px 2px rgba(16, 18, 24, .04), 0 4px 14px rgba(16, 18, 24, .06);      /* floating over the map */
    --st-shadow-3: 0 2px 6px rgba(16, 18, 24, .05), 0 12px 32px rgba(16, 18, 24, .10);     /* menus, popovers, tips */
    --st-panel-edge: 1px 0 0 var(--st-border); /* use as box-shadow / border colour where a panel meets the map */

    /* ---- focus and motion ---- */
    --st-focus: 0 0 0 2px var(--st-surface), 0 0 0 4px rgba(222, 101, 71, .45);
    --st-ease: cubic-bezier(.2, .7, .2, 1);
    --st-dur: 140ms;

    /* ---- one-hue data ramp (e.g. transmission voltage: low to high). Distinct in lightness and still visible on
       both street and satellite basemaps; pair with line weight steps. ---- */
    --st-data-1: #9DB4DE; --st-data-2: #6F8FCB; --st-data-3: #4867AE; --st-data-4: #2B4384;
}

:root.dark-mode, body.dark-mode, [data-theme="dark"] {
    --st-canvas: #0E0F11;
    --st-panel: #131417;
    --st-surface: #1A1B1F;
    --st-fill: #202226;
    --st-fill-hover: #282A2F;
    --st-fill-strong: #34363C;

    --st-border: rgba(255, 255, 255, .07);
    --st-border-strong: rgba(255, 255, 255, .12);

    --st-text: #ECEDEF;
    --st-text-2: #A2A7B1;   /* 7.6:1 on --st-panel */
    --st-text-3: #6D727C;
    --st-text-on-accent: #FFFFFF;

    --st-accent: #E2785C;
    --st-accent-hover: #EA8A70;
    --st-accent-soft: rgba(226, 120, 92, .12);
    --st-accent-line: rgba(226, 120, 92, .28);
    --st-accent-ink: #EE9A83;

    --st-good: #52B283;  --st-good-soft: rgba(82, 178, 131, .10);  --st-good-line: rgba(82, 178, 131, .22);  --st-good-ink: #7CCBA3;
    --st-warn: #D3A04D;  --st-warn-soft: rgba(211, 160, 77, .10);  --st-warn-line: rgba(211, 160, 77, .24);  --st-warn-ink: #E2BB7A;
    --st-bad:  #D9696C;  --st-bad-soft:  rgba(217, 105, 108, .10); --st-bad-line:  rgba(217, 105, 108, .24); --st-bad-ink:  #EC9597;
    --st-info: #7F9BD0;  --st-info-soft: rgba(127, 155, 208, .10); --st-info-line: rgba(127, 155, 208, .24); --st-info-ink: #A6BDE6;
    --st-neutral-soft: rgba(255, 255, 255, .06);

    --st-shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
    --st-shadow-2: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .32);
    --st-shadow-3: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .45);

    --st-focus: 0 0 0 2px var(--st-surface), 0 0 0 4px rgba(226, 120, 92, .55);

    --st-data-1: #B9CBEC; --st-data-2: #8FA9DD; --st-data-3: #6585C8; --st-data-4: #4A68AC;
}

/* =====================================================================================================
   Base components (opt-in classes; nothing here styles existing markup until a page uses the class)
   ===================================================================================================== */

/* Card: a surface on a panel. .st-card--float for cards over the map. */
.st-card { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-r-lg); box-shadow: var(--st-shadow-1); }
.st-card--float { box-shadow: var(--st-shadow-2); }

/* All-caps section label */
.st-lbl { font-size: var(--st-fs-xs); font-weight: var(--st-fw-medium); letter-spacing: var(--st-tracking-caps); text-transform: uppercase; color: var(--st-text-2); line-height: 1.3; }

/* Icon button: 32 px hit area, 16 px glyph, quiet until hovered */
.st-ib {
    width: var(--st-h-ctl); height: var(--st-h-ctl); display: inline-grid; place-items: center; flex: none; padding: 0;
    border: 0; border-radius: var(--st-r-md); background: transparent; color: var(--st-text-2); cursor: pointer;
    transition: background-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease);
}
.st-ib svg { width: var(--st-ic); height: var(--st-ic); }
.st-ib:hover { background: var(--st-fill-hover); color: var(--st-text); }
.st-ib:active { background: var(--st-fill-strong); }
.st-ib.is-on, .st-ib[aria-pressed="true"] { background: var(--st-accent-soft); color: var(--st-accent-ink); }
.st-ib:focus-visible { outline: none; box-shadow: var(--st-focus); }

/* Pill: soft background, strong text. Variants: .is-good .is-warn .is-bad .is-info .is-accent (default neutral) */
.st-pill {
    display: inline-flex; align-items: center; gap: var(--st-sp-1); height: 20px; padding: 0 var(--st-sp-2); border-radius: var(--st-r-pill);
    font-size: var(--st-fs-xs); font-weight: var(--st-fw-semibold); line-height: 1; white-space: nowrap;
    background: var(--st-neutral-soft); color: var(--st-text-2);
}
.st-pill.is-good { background: var(--st-good-soft); color: var(--st-good-ink); }
.st-pill.is-warn { background: var(--st-warn-soft); color: var(--st-warn-ink); }
.st-pill.is-bad { background: var(--st-bad-soft); color: var(--st-bad-ink); }
.st-pill.is-info { background: var(--st-info-soft); color: var(--st-info-ink); }
.st-pill.is-accent { background: var(--st-accent-soft); color: var(--st-accent-ink); }

/* Status dot */
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--st-text-3); }
.st-dot.is-good { background: var(--st-good); } .st-dot.is-warn { background: var(--st-warn); } .st-dot.is-bad { background: var(--st-bad); }

/* Chips (segmented presets). Markup: <div class="st-chips"><button class="st-chip" aria-pressed="true">0.5 mi</button>… */
.st-chips { display: inline-flex; flex-wrap: wrap; gap: var(--st-sp-1); }
.st-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--st-sp-1); height: var(--st-h-ctl-sm); padding: 0 10px;
    border: 1px solid var(--st-border-strong); border-radius: var(--st-r-pill); background: var(--st-surface); color: var(--st-text-2);
    font: inherit; font-size: var(--st-fs-sm); font-weight: var(--st-fw-medium); white-space: nowrap; cursor: pointer;
    transition: background-color var(--st-dur) var(--st-ease), color var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease);
}
.st-chip:hover { color: var(--st-text); background: var(--st-fill); }
.st-chip.is-on, .st-chip[aria-pressed="true"] { background: var(--st-text); border-color: var(--st-text); color: var(--st-surface); }
.st-chip:focus-visible { outline: none; box-shadow: var(--st-focus); }

/* Switch. Markup: <button class="st-switch" role="switch" aria-checked="false"><span></span></button>
   28x16 track, 12 px thumb, accent when on. */
.st-switch {
    position: relative; width: 28px; height: 16px; flex: none; padding: 0; border: 0; border-radius: var(--st-r-pill);
    background: var(--st-fill-strong); cursor: pointer; transition: background-color var(--st-dur) var(--st-ease);
}
.st-switch > span {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: transform var(--st-dur) var(--st-ease);
}
/* off track: inset hairline keeps it visible on light panels (>= 3:1 edge) */
.st-switch:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px var(--st-border-strong); }
.st-switch[aria-checked="true"] { background: var(--st-accent); }
.st-switch[aria-checked="true"] > span { transform: translateX(12px); }
.st-switch:hover:not([disabled]) { filter: brightness(.97); }
.st-switch[disabled], .st-switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.st-switch:focus-visible { outline: none; box-shadow: var(--st-focus); }

/* Range: thin 2 px track, 12 px thumb. Fill the done part with --st-range-pct (e.g. style="--st-range-pct:60%"). */
.st-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; --st-range-pct: 50%; }
.st-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--st-text-2) var(--st-range-pct), var(--st-fill-strong) var(--st-range-pct)); }
.st-range::-moz-range-track { height: 2px; border-radius: 2px; background: var(--st-fill-strong); }
.st-range::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--st-text-2); }
.st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--st-surface); border: 0; box-shadow: 0 0 0 1px var(--st-border-strong), 0 1px 3px rgba(0, 0, 0, .18); }
.st-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--st-surface); border: 0; box-shadow: 0 0 0 1px var(--st-border-strong), 0 1px 3px rgba(0, 0, 0, .18); }
.st-range:focus-visible { outline: none; }
.st-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--st-focus); }
.st-range:focus-visible::-moz-range-thumb { box-shadow: var(--st-focus); }

/* Secondary / quiet button */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--st-h-ctl); padding: 0 var(--st-sp-3);
    border: 1px solid var(--st-border-strong); border-radius: var(--st-r-md); background: var(--st-surface); color: var(--st-text);
    font: inherit; font-size: var(--st-fs-md); font-weight: var(--st-fw-medium); white-space: nowrap; cursor: pointer;
    transition: background-color var(--st-dur) var(--st-ease), border-color var(--st-dur) var(--st-ease);
}
.st-btn:hover { background: var(--st-fill); }
.st-btn:focus-visible { outline: none; box-shadow: var(--st-focus); }
.st-btn--primary { background: var(--st-accent); border-color: transparent; color: var(--st-text-on-accent); }
.st-btn--primary:hover { background: var(--st-accent-hover); }
.st-btn svg { width: var(--st-ic-sm); height: var(--st-ic-sm); }

@media (prefers-reduced-motion: reduce) {
    .st-ib, .st-chip, .st-switch, .st-switch > span, .st-btn { transition: none; }
}