/*
 * Lumisol design tokens: the ONLY place raw colour, type, space, radius and motion values live.
 * Source: Lumisol design system (Claude Design export, _ds/lumisol-design-system-2e48e7/tokens/*.css).
 * Three tiers (CODER SOP §8): Tier 1 primitives -> Tier 2 semantic roles -> Tier 3 component parts.
 * Names keep the design system's own vocabulary so the ported component CSS binds without renaming;
 * the design system repeated raw hex in its semantic tier, which here references Tier 1 instead.
 * Mirrored in theme.json (palette, font sizes, spacing). Change brand values at Tier 1 only.
 */

/* ---------- Tier 1: primitives ---------- */
:root {
	/* Brand (Lumisol stylesheet) */
	--ls-midnight: #081116;
	--ls-white: #ffffff;
	--ls-silver: #c4cacd; /* provisional in the design system: hex not legible in the source PDF (logged) */
	--ls-electric-green: #169b53;
	--ls-verde-volt: #8fc962;
	--ls-energy-gradient: linear-gradient(225deg, var(--ls-electric-green) 0%, var(--ls-verde-volt) 100%); /* logo mark only */

	/* Green scale */
	--green-50: #eaf5ee;
	--green-500: #1db061;
	--green-600: var(--ls-electric-green);
	--green-700: #0f7a40;
	--green-800: #0e7540;
	--green-900: #0c6332; /* primary button hover (7.38:1 with white) */
	--green-950: #0a552b; /* primary button active */
	--volt-50: #eef7e6;
	--green-25: #f4f8f0; /* residential tone: warm green-white surface (residential-soft.css) */

	/* Neutral, tinted toward Midnight */
	--neutral-950: var(--ls-midnight);
	--neutral-900: #10191f;
	--neutral-800: #1b262d;
	--neutral-700: #2c3940;
	--neutral-600: #43515a;
	--neutral-500: #5f6b72;
	--neutral-400: #86929a;
	--neutral-300: #a7b0b5;
	--neutral-200: var(--ls-silver);
	--neutral-100: #e3e7e9;
	--neutral-50: #f3f5f5;
	--neutral-0: var(--ls-white);

	/* Functional */
	--amber-600: #c98a0b; --amber-800: #8a5a00; --amber-50: #fbf3df;
	--red-600: #c8321e; --red-700: #a82715; --red-50: #fbece9; --red-300: #ff8a78;
	--blue-600: #2c6da8; --blue-700: #22568a; --blue-50: #e8f0f8;

	/* Translucent (glass, glow, scrims) */
	--alpha-volt-22: rgba(143, 201, 98, .22);
	--alpha-volt-40: rgba(143, 201, 98, .4);
	--alpha-volt-70: rgba(143, 201, 98, .7);
	--alpha-green-12: rgba(22, 155, 83, .12);
	--alpha-green-16: rgba(22, 155, 83, .16);
	--alpha-green-28: rgba(22, 155, 83, .28);
	--alpha-midnight-08: rgba(8, 17, 22, .08);
	--alpha-midnight-24: rgba(8, 17, 22, .24);
	--alpha-midnight-30: rgba(8, 17, 22, .3);
	--alpha-midnight-35: rgba(8, 17, 22, .35);
	--alpha-midnight-46: rgba(8, 17, 22, .46);
	--alpha-midnight-60: rgba(8, 17, 22, .6);
	--alpha-midnight-86: rgba(8, 17, 22, .86);
	/* Hero scrim steps used by the hub and homepage heroes (design: .84/.58/.28 and .82/.55/.25) */
	--alpha-midnight-84: rgba(8, 17, 22, .84); --alpha-midnight-58: rgba(8, 17, 22, .58); --alpha-midnight-28: rgba(8, 17, 22, .28);
	--alpha-midnight-82: rgba(8, 17, 22, .82); --alpha-midnight-55: rgba(8, 17, 22, .55); --alpha-midnight-25: rgba(8, 17, 22, .25);
	--alpha-white-16: rgba(255, 255, 255, .16);
	--alpha-white-60: rgba(255, 255, 255, .6);
	--alpha-white-72: rgba(255, 255, 255, .72);
	--alpha-white-94: rgba(255, 255, 255, .94);
	--alpha-white-82: rgba(255, 255, 255, .82);
	--alpha-midnight-28: rgba(8, 17, 22, .28);

	/* Google brand colours: only for the Google "G" mark required by Google's attribution rules */
	--google-red: #ea4335; --google-blue: #4285f4; --google-yellow: #fbbc05; --google-green: #34a853;

	/* Type families: League Spartan (for Nobel Uno) and Jost (for Futura), self-hosted, OFL. Logged substitution. */
	--font-family-display: 'League Spartan', 'Nobel Uno', 'Futura', system-ui, sans-serif;
	--font-family-body: 'Jost', 'Futura', 'Futura PT', system-ui, sans-serif;

	--fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

	/* Fluid type, 375 -> 1440 */
	--fs-display: clamp(56px, 4.2rem + 5.6vw, 136px);
	--fs-h1: clamp(42px, 2.2rem + 3.9vw, 88px);
	--fs-h2: clamp(32px, 1.6rem + 2.3vw, 56px);
	--fs-h3: clamp(24px, 1.25rem + .9vw, 32px);
	--fs-h4: clamp(19px, 1.1rem + .25vw, 22px);
	--fs-body-lg: clamp(18px, 1.05rem + .3vw, 21px);
	--fs-body: clamp(16px, .98rem + .1vw, 17px);
	--fs-body-sm: 14px;
	--fs-caption: 13px;
	--fs-eyebrow: 12px;
	--fs-data-xl: clamp(72px, 3.6rem + 4.8vw, 144px);
	--fs-data: clamp(56px, 2.8rem + 3vw, 96px);
	--fs-data-sm: clamp(40px, 2rem + 1.4vw, 56px);
	--fs-ui: 15px;

	--lh-display: .9; --lh-h1: .98; --lh-h2: 1.04; --lh-h3: 1.15; --lh-h4: 1.3;
	--lh-body-lg: 1.5; --lh-body: 1.6; --lh-body-sm: 1.5; --lh-data: .9; --lh-ui: 1.2;
	--ls-display: -.035em; --ls-h1: -.03em; --ls-h2: -.02em; --ls-h3: -.01em; --ls-h4: -.005em;
	--ls-body: 0; --ls-eyebrow: .14em; --ls-data: -.04em; --ls-ui: .01em;
	--measure-narrow: 38ch; --measure-body: 64ch; --measure-heading: 18ch;

	/* 8px spacing scale */
	--space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
	--space-6: 48px; --space-7: 64px; --space-8: 80px; --space-9: 96px; --space-10: 120px; --space-11: 160px;

	/* Radius: near-square system */
	--radius-0: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-round: 999px;

	--border-hair: 1px; --border-strong: 2px; --border-focus: 2px;
	--icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-stroke: 1.5;

	/* Motion */
	--dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 560ms; --dur-reveal: 900ms; --dur-count: 1400ms;
	--ease-out: cubic-bezier(.2, .7, .1, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-standard: cubic-bezier(.3, 0, .2, 1);
	--stagger: 80ms;

	/* Breakpoints (reference only; media queries use the literal values 480/768/1024/1280/1440) */
	--bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px;
}

/* ---------- Tier 2: semantic roles ---------- */
:root {
	--font-display: var(--font-family-display);
	--font-body: var(--font-family-body);
	--font-data: var(--font-family-display);

	--brand-primary: var(--green-600);
	--brand-secondary: var(--ls-midnight);
	--brand-accent: var(--ls-verde-volt);
	--brand-primary-hover: var(--green-500);
	--brand-primary-active: var(--green-800);
	--brand-green-700: var(--green-700);
	--brand-green-50: var(--green-50);
	--brand-accent-tint: var(--volt-50);

	--success: var(--green-600); --success-text: var(--green-700); --success-bg: var(--green-50);
	--warning: var(--amber-600); --warning-text: var(--amber-800); --warning-bg: var(--amber-50);
	--error: var(--red-600); --error-text: var(--red-700); --error-bg: var(--red-50); --error-on-dark: var(--red-300);
	--info: var(--blue-600); --info-text: var(--blue-700); --info-bg: var(--blue-50);

	--surface-light: var(--neutral-0);
	--surface-muted: var(--neutral-50);
	--surface-silver: var(--neutral-100);
	--surface-dark: var(--neutral-950);
	--surface-dark-raised: var(--neutral-900);
	--surface-brand: var(--green-600);

	--text-primary: var(--neutral-950);          /* 18.9:1 on white */
	--text-secondary: var(--neutral-600);        /* 8.3:1 */
	--text-tertiary: var(--neutral-500);         /* 5.5:1, minimum for body copy */
	--text-link: var(--green-700);               /* 5.4:1 */
	--text-on-brand: var(--neutral-950);         /* 5.3:1 on Electric Green */
	--text-inverse: var(--neutral-0);
	--text-inverse-secondary: var(--neutral-200);/* 11.6:1 on Midnight */
	--text-inverse-tertiary: var(--neutral-400); /* 6.0:1 */
	--text-link-inverse: var(--ls-verde-volt);

	--line-light: var(--neutral-100);
	--line-light-strong: var(--neutral-200);
	--line-dark: var(--neutral-700);
	--line-dark-strong: var(--neutral-600);
	--line-ink: var(--neutral-950);

	--focus-ring: var(--green-600);
	--focus-ring-inverse: var(--ls-verde-volt);

	--glow-volt: var(--alpha-volt-22);
	--glow-green: var(--alpha-green-28);
	--glass-dark: var(--alpha-midnight-46);
	--glass-light: var(--alpha-white-72);
	--glass-border-dark: var(--alpha-white-16);
	--glass-border-light: var(--alpha-white-60);
	--glass-blur: blur(20px) saturate(140%);
	--shadow-glass: 0 24px 48px -24px var(--alpha-midnight-35);
	--shadow-header: 0 1px 0 var(--alpha-midnight-08);
	--shadow-menu: 0 24px 48px -16px var(--alpha-midnight-24);
	--scrim-hero: linear-gradient(90deg, var(--alpha-midnight-86) 0%, var(--alpha-midnight-60) 45%, var(--alpha-midnight-30) 100%);
	--scrim-hero-hub: linear-gradient(90deg, var(--alpha-midnight-84) 0%, var(--alpha-midnight-58) 45%, var(--alpha-midnight-28) 100%);
	--scrim-hero-home: linear-gradient(90deg, var(--alpha-midnight-82) 0%, var(--alpha-midnight-55) 45%, var(--alpha-midnight-25) 100%);

	/* Layout */
	--section-xl: var(--space-11);
	/* One section rhythm everywhere (client request in the design, 4 Nov 2026): 80 / 64 / 48. */
	--section-lg: var(--space-8);
	--section-md: var(--space-8);
	--group-gap: var(--space-7);
	--stack-lg: var(--space-5);
	--stack-md: var(--space-4);
	--stack-sm: var(--space-3);
	--card-pad: var(--space-5);
	--form-gap: var(--space-4);
	--header-h: 88px;
	--header-h-compact: 64px;
	--grid-columns: 12;
	--grid-gutter: 24px;
	--page-margin: 72px;
	--container-max: 1296px;
	--container-wide: 1440px;
	--container-text: 720px;
	--container-form: 560px;
	--target-min: 44px;
	--control-h: 56px;
	--control-h-sm: 44px;
	--z-header: 100;
	--z-overlay: 200;
}

/* ---------- Tier 3: component parts ---------- */
:root {
	/* Design QA fix (site-overrides.css, 16 Oct 2026): white labels on Green 700 (5.41:1) instead of the design system's
	   Midnight on Electric Green, with darker hover/active. */
	--button-primary-bg: var(--green-700);
	--button-primary-bg-hover: var(--green-900);
	--button-primary-bg-active: var(--green-950);
	--button-primary-text: var(--text-inverse);
	--button-radius: var(--radius-xs);
	--input-radius: var(--radius-xs);
	--input-border: var(--line-light-strong);
	--input-border-error: var(--error);
	--card-rule: var(--line-ink);
	--card-rule-active: var(--brand-primary);
	--panel-radius: var(--radius-lg);
	--tile-radius: var(--radius-md);
	--hero-scrim: var(--scrim-hero);
	--hero-scrim-hub: var(--scrim-hero-hub);
	--hero-scrim-home: var(--scrim-hero-home);
	--circuit-line: var(--brand-primary);
	--circuit-glow: var(--brand-accent);
	--circuit-track: var(--alpha-green-16);
	--review-star: var(--brand-primary);
}

/* Breakpoint overrides (design system spacing.css) */
@media (max-width: 1023px) {
	:root { --section-xl: 120px; --section-lg: var(--space-7); --section-md: var(--space-7); --group-gap: 48px; --grid-columns: 8; --grid-gutter: 20px; --page-margin: 40px; --card-pad: 24px; --header-h: 72px; }
}
@media (max-width: 767px) {
	:root { --section-xl: 96px; --section-lg: var(--space-6); --section-md: var(--space-6); --group-gap: 32px; --stack-lg: 24px; --grid-columns: 4; --grid-gutter: 16px; --page-margin: 20px; --header-h: 64px; --header-h-compact: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --dur-count: 0ms; --stagger: 0ms; }
}

/* Residential tone (design residential-soft.css, November 2026): set data-tone="home" on the page root of the residential
   pages. Warmer muted surface, rounder corners, slightly looser display tracking. Commercial pages are unaffected. */
[data-tone="home"] {
	--surface-muted: var(--green-25);
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--ls-display: -.02em;
	--ls-h1: -.02em;
	--ls-h2: -.015em;
	--lh-display: 1;
	--lh-h2: 1.1;
	--glass-light-home: var(--alpha-white-82);
	--shadow-glass-home: 0 24px 48px -28px var(--alpha-midnight-28);
}

/* Self-hosted fonts (OFL substitutes for the licensed Nobel Uno and Futura; see docs-build/assumptions.md) */
@font-face { font-family: 'League Spartan'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/league-spartan-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-latin-wght-italic.woff2') format('woff2'); }