/*
 * Design tokens.
 *
 * Every value here is read from the approved Swiftheat design source —
 * with ONE deliberate, documented exception: --site-container. The
 * approved design files use max-width:1640px throughout; this project's
 * locked content-width decision is 1200px, so that is what's defined
 * here. Everything else is the design's own value, not adjusted, not
 * guessed.
 *
 * This file defines tokens only — no selectors, no page layout.
 */

:root {
	/* ---- Layout ---- */
	--site-container: 1200px; /* LOCKED project decision — NOT the design's own 1640px */
	--gutter-desktop: 64px;
	--gutter-mobile: 24px;

	/* ---- Color: brand ---- */
	--color-red: #E31E24;          /* primary accent — CTAs, eyebrow labels on light bg */
	--color-navy: #0C2547;         /* heading color on light sections */
	--color-navy-deepest: #081729; /* top bar, footer bg */
	--color-navy-deep: #0A1E3C;    /* QA panel bg, hero photo badge bg */
	--color-indigo-hero: #0A0C52;  /* hero section bg */
	--color-navy-raised: #10305C;  /* hover/border state on navy panels */
	--color-blue-link: #0B0BD0;    /* "Learn More →" links, feature dash marks */
	--color-blue-link-dark: #143E7C; /* default anchor color, input focus border */
	--color-pink-accent: #F08A8D;  /* eyebrow label on navy/dark sections */

	/* ---- Color: background ---- */
	--color-bg-white: #FFFFFF;
	--color-bg-neutral: #F7F8F9;   /* alternating section bg */
	--color-bg-warm: #F5F4F0;      /* quality section, contact form panel */
	--color-bg-tray: #F5F7FA;      /* product image tray (paired with mix-blend-mode:multiply) */
	--color-bg-dropzone: #FBFAF7;  /* file upload control bg */

	/* ---- Color: text ---- */
	--text-base: #1E2733;
	--text-nav: #3A4656;
	--text-body-muted: #4A5668;
	--text-secondary: #5B6878;
	--text-faint-label: #9AA6B6;
	--text-on-dark: #FFFFFF;
	--text-on-dark-body: #B9C6DC;
	--text-on-dark-body-alt: #BCC1EE;
	--text-on-dark-muted: #8FA6C9;
	--text-on-dark-caption: #C4D1E6; /* ADDED for Industries build: caption text over a dark photo-overlay gradient — confirmed genuinely reusable (identical hex, identical role) in both Swiftheat Home v2.dc.html and Swiftheat About.dc.html's own industry-tile markup, not a one-off */
	--text-on-dark-value: #E8EDF5; /* ADDED for Contact build: confirmed genuinely reusable — identical hex/role (a "value" text color on dark navy backgrounds) across Contact's own email/phone/address values AND the Footer column-heading text repeated on 6 separate approved design files (Home v2, About, Products, Contact, Product Detail) */

	/* ---- Color: border ---- */
	--border-light: #E6E5E0;
	--border-warm: #D8D6CE;
	--border-subtle: #EDECE8;
	--border-dashed: #B7B4A9;

	/* ---- Color: status ---- */
	--color-success: #35D07F;
	/* No warning/error token: none exists anywhere in the approved design
	   (no validation-error UI state in the source at all). Do not invent
	   one here — add it only when a real design file defines it. */

	/* ---- Typography: families ---- */
	--font-primary: 'Manrope', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	/* ---- Typography: weights ---- */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* ---- Typography: scale (desktop; sizes vary by page/section, these
	   are the most-repeated values, not a forced single scale) ---- */
	--fs-h1-flagship: 88px;   /* Home hero */
	--fs-h1-page: 72px;       /* About/Contact hero */
	--fs-h1-catalogue: 68px;  /* Products hero */
	--fs-h1-detail: 60px;     /* Product Detail hero */
	--fs-h2-major: 56px;      /* major section headings, e.g. Home Product Range */
	--fs-h2-feature: 52px;    /* dark-section feature headings */
	--fs-h2-sub: 44px;        /* sub-section headings */
	--fs-card-title: 20px;
	--fs-body-large: 19px;
	--fs-body: 17px;
	--fs-body-small: 14px;
	--fs-eyebrow: 13px;
	--fs-meta: 12.5px;
	--fs-micro: 11px;
	--fs-utility: 12px;  /* ADDED for Header build: top utility bar text — measured via DevTools on Swiftheat Home v2.dc.html, distinct from the existing 11px/12.5px micro/meta sizes */
	--fs-nav: 14.5px;    /* ADDED for Header build: main nav link size — a genuinely reusable "nav" typographic role, not a one-off */

	--lh-tight: 1.02;
	--lh-heading: 1.05;
	--lh-heading-loose: 1.1;
	--lh-body: 1.7;
	--lh-body-loose: 1.8;

	--ls-tight: -0.03em;   /* H1 */
	--ls-heading: -0.025em; /* H2 */
	--ls-eyebrow: 0.22em;
	--ls-meta: 0.08em;
	--ls-micro: 0.06em;
	--ls-utility: 0.04em; /* ADDED for Header build: top utility bar letter-spacing (measured 0.48px at 12px = 0.04em) — distinct from the existing 0.06/0.08/0.22em values, do not substitute one of those */
	--ls-cta: 0.02em;     /* ADDED for Header build: CTA button letter-spacing — reusable across every primary/compact button in the design, not header-specific */

	/* ---- Spacing: section rhythm ---- */
	--space-section-lg-top: 130px;
	--space-section-lg-bottom: 140px; /* varies 120-140px by section, 140px is Product Range's own value */
	--space-section-standard: 110px;
	--space-section-compact-top: 72px;   /* interior-page heroes */
	--space-section-compact-bottom: 96px;

	/* ---- Spacing: grid gaps ---- */
	--gap-split-2col: 72px;   /* text+image 2-col layouts, varies 72-96px */
	--gap-grid-4col: 36px;    /* product cards, process steps */
	--gap-grid-3col: 28px;    /* about "what we do", overview strip, varies 28-36px */
	--gap-grid-6col: 24px;    /* applications grid, bento grid */
	--gap-form: 16px;

	/* ---- Spacing: component padding ---- */
	--pad-card: 30px;         /* varies 28-34px */
	--pad-card-form: 48px;    /* form panels, varies 48-52px */
	--pad-button-primary: 17px 36px;
	--pad-button-compact: 13px 28px;
	--pad-input: 16px 18px;

	/* ---- Border radius (exactly 3 values by design — do not add a 4th) ---- */
	--radius-sharp: 0px;   /* buttons, CTAs, FAQ accordion */
	--radius-card: 14px;   /* product/feature/overview cards, spec table container */
	--radius-frame: 18px;  /* hero image frame */
	--radius-pill: 999px;  /* filter pills, search bar, status badges */

	/* ---- Shadows ---- */
	--shadow-card-rest: 0 2px 8px rgba(20, 40, 70, 0.05);
	--shadow-card-hover: 0 28px 56px rgba(20, 40, 70, 0.14);
	--shadow-frame-hero: 0 50px 100px rgba(2, 8, 20, 0.55);
	--shadow-panel-deep: 0 40px 80px rgba(8, 23, 41, 0.35);

	/* ---- Transitions ---- */
	--transition-fast: 0.2s;
	--transition-standard: 0.25s;
	--translate-card-hover: -7px;
	--blur-glass: 12px; /* ADDED for Header build: backdrop-filter blur on the sticky translucent header — a distinct, named "glass" effect likely reused by any other sticky/translucent surface later */

	/* ---- Breakpoints (NOT sourced from the design — the approved files
	   contain zero @media queries, confirmed by grep across the whole
	   design folder; these are standard, commonly-used breakpoints chosen
	   for this build, not a design decision. Documented as CSS custom
	   media-adjacent values for reference; actual @media rules are written
	   per-component when each is built, not here.) ---- */
	--bp-tablet: 1024px;
	--bp-mobile: 768px;
}