/*
 * FAJR Solar Kit — design token contract (docs/REDESIGN-PLAN.md "Design tokens").
 * Light mode on :root, dark mode on [data-theme="dark"] (set on <html> by the no-flash script).
 * Sections that must always be dark (e.g. photo heroes, CTA band) use .fajr-scheme-dark or the
 * Group block style "Always-dark section" (.is-style-fajr-dark-section): same dark tokens, scoped.
 * Other modules (e.g. modules/calculator) MUST consume these names; do not rename.
 *
 * Contract names (stable): --bg --surface --glass --glass-dark --text --muted --sun --energy --eco --sky
 * plus radius (--radius-*), spacing (--space-*), font (--font-*) variables below.
 * Extra helper tokens (--*-ink, --line, --shadow-*, --glass-*) are additive and may be used too.
 */

/* Fonts (r3): Basic Latin + the Latin-1 / punctuation characters the sites use (no accented letters – unused), variable
 * weights: Inter 300–700 (body text is 300), Inter Tight 400–700 (headings). 24.5 + 17.5 KB (r2: 28 + 20), both preloaded
 * in inc/assets.php. Built by sites/tools/perf/subset-fonts.mjs. New content = new file name (1-year immutable cache, K9). */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-300-700-r3.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/inter-tight-latin-400-700-r3.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
/* Metric-matched local fallbacks (shown until the web font arrives): same average glyph width and line metrics,
 * so the swap does not reflow text. r3: one face per weight band (body text is Inter 300, buttons/headings 600 - one
 * fallback for all weights let the /contact-us/ hero paragraph wrap into an extra line until Inter arrived); 550+ uses
 * Arial Bold. Values printed by subset-fonts.mjs (against Arial / Arial Bold; skipped where Arial is absent).
 * Same unicode-range as the web fonts: characters Inter does not have (arrows, ≥ …) keep the normal fallback. */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 1 349;
	size-adjust: 105.56%;
	ascent-override: 91.78%;
	descent-override: 22.85%;
	line-gap-override: 0.00%;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 350 549;
	size-adjust: 108.04%;
	ascent-override: 89.67%;
	descent-override: 22.33%;
	line-gap-override: 0.00%;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 550 1000;
	size-adjust: 101.32%;
	ascent-override: 95.61%;
	descent-override: 23.81%;
	line-gap-override: 0.00%;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
	font-family: "Inter Tight Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 1 549;
	size-adjust: 99.24%;
	ascent-override: 97.62%;
	descent-override: 24.31%;
	line-gap-override: 0.00%;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}
@font-face {
	font-family: "Inter Tight Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 550 1000;
	size-adjust: 93.74%;
	ascent-override: 103.34%;
	descent-override: 25.73%;
	line-gap-override: 0.00%;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0-00B3, U+00B7, U+00B9, U+00BB, U+00D7, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212;
}

:root {
	color-scheme: light;

	/* ---- Colour (light: inspiration #3 + #4) ---- */
	--bg: #F5F4EF;
	--surface: #FFFFFF;
	--surface-2: #ECEBE4;            /* subtle alt section background */
	--glass: rgba(255, 255, 255, .55);
	--glass-border: rgba(255, 255, 255, .6);
	--glass-blur: 18px;
	--glass-dark: rgba(40, 40, 36, .35);   /* header pill over photos (#3) */
	--glass-dark-blur: 14px;
	--glass-dark-border: rgba(255, 255, 255, .22);
	--text: #161815;
	--muted: #5D625B;
	--line: rgba(22, 24, 21, .10);   /* hairlines / card borders */
	--sun: #F3D34A;                  /* primary CTA bg — always use dark text on it */
	--sun-ink: #161815;              /* text colour on --sun */
	--energy: #FF7A1A;               /* orange links / connectors / glow */
	--energy-ink: #B84A00;           /* AA-contrast orange for small text on light bg */
	--energy-glow: 0 0 10px rgba(255, 122, 26, .45);
	--eco: #2E9E5B;
	--sky: #3B82F6;
	--on-photo: #FFFFFF;             /* text over hero photos (both modes) */

	/* ---- Elevation ---- */
	--shadow-sm: 0 1px 2px rgba(22, 24, 21, .06), 0 1px 1px rgba(22, 24, 21, .04);
	--shadow-md: 0 8px 24px -8px rgba(22, 24, 21, .14), 0 2px 6px rgba(22, 24, 21, .05);
	--shadow-lg: 0 24px 60px -20px rgba(22, 24, 21, .25);

	/* ---- Radius ---- */
	--radius-pill: 999px;
	--radius-card: 20px;
	--radius-panel: 28px;
	--radius-sm: 12px;

	/* ---- Spacing scale 4/8/12/16/24/32/48/64/96/128 ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--section-pad: clamp(64px, 9vw, 128px);
	--gutter: clamp(16px, 4vw, 48px);
	--content-max: 1240px;

	/* ---- Type ---- */
	--font-heading: "Inter Tight", "Inter Tight Fallback", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--fw-heading: 600;
	--tracking-heading: -0.025em;
	--fs-xs: .8125rem;   /* 13 */
	--fs-sm: .9375rem;   /* 15 */
	--fs-base: 1rem;     /* 16 */
	--fs-lg: 1.125rem;   /* 18 */
	--fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	--fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	--fs-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	--fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--dur-fast: 160ms;
	--dur: 320ms;
	--dur-slow: 700ms;
}

[data-theme="dark"],
.fajr-scheme-dark,
.is-style-fajr-dark-section {
	color-scheme: dark;

	/* ---- Colour (dark: inspiration #1 + #2) ---- */
	--bg: #0B0D0B;
	--surface: #141714;
	--surface-2: #101210;
	--glass: rgba(20, 23, 20, .55);
	--glass-border: rgba(255, 255, 255, .08);
	--glass-dark: rgba(40, 40, 36, .35);
	--glass-dark-border: rgba(255, 255, 255, .16);
	--text: #F2F3EF;
	--muted: #9CA39A;
	--line: rgba(255, 255, 255, .09);
	--sun: #F3E35A;
	--sun-ink: #0B0D0B;
	--energy: #FF8A2B;
	--energy-ink: #FF9A47;
	--energy-glow: 0 0 12px rgba(255, 122, 26, .55);
	--eco: #4CC38A;
	--sky: #60A5FA;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .6);
	--shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .7);
}