/**
 * Signal Tunnel — design tokens.
 *
 * Every future template (header, hero, pricing, ...) is built ONLY on top
 * of the custom properties defined here — never hardcode a hex value, a
 * px size, or a spacing number in component CSS. This file mirrors
 * inc/design-tokens.php, which is the PHP-side source of truth for the
 * same values (used for inline critical CSS and Customizer defaults). If
 * you change a value here, change it there too.
 *
 * Contrast ratios below were computed against the WCAG 2 relative-
 * luminance formula, not eyeballed. AA requires 4.5:1 for normal text,
 * 3:1 for large text (>=24px, or >=18.66px bold) and for UI-component
 * boundaries (borders/focus rings of interactive elements).
 */

:root {

	/* ---------------------------------------------------------------
	 * Color — "Signal Tunnel": REVISED from this theme's original
	 * neutral-charcoal ground to a navy-blue one — the brand direction is
	 * now a deliberate white/blue system (white section bands, a blue dark
	 * ground, one Electric Cobalt accent), not the "charcoal, deliberately
	 * NOT navy" split this file used to document. Semantic colors keep a
	 * deliberate hue-distance from the accent — "info" in particular is
	 * violet rather than the more conventional blue, because blue is this
	 * brand's own accent and a blue "info" badge would read as a CTA.
	 * ------------------------------------------------------------- */

	/* Surfaces — darkest to lightest, all one blue family. Ratios
	   recomputed against the new ground (WCAG 2 relative luminance, same
	   method as before — every number below is verified, not eyeballed). */
	--color-bg:            #0A0F1D; /* page ground */
	--color-bg-alt:         #0F1529; /* alternating section ground, subtle lift over bg */
	--color-surface:        #141C32; /* card / raised surface */
	--color-surface-2:      #1B2643; /* nested surface: popovers, input fields, table stripes */
	--color-border:         #222D4C; /* decorative hairline (dividers, card edges) — low-contrast on purpose, not for interactive boundaries (WCAG 1.4.11 doesn't require contrast here) */
	--color-border-strong:  #7B87A5; /* functional boundary (inputs, outline buttons): 5.32:1 on bg, 4.71:1 on surface — clears AA non-text 3:1 on both with margin */

	/* Text */
	--color-text:        #F2F4F6; /* primary text — 17.29:1 on bg (AAA) */
	--color-text-muted:  #A7ACB3; /* secondary text — 8.37:1 on bg (AAA) */
	--color-text-faint:  #7B828C; /* tertiary text (meta, timestamps, placeholders) — 4.92:1 on bg (AA) */

	/* Accent — "Signal Cobalt". CTAs, the Signal Chevron, active/live
	   states. Tuned brighter than a literal Pantone cobalt specifically so
	   it clears AA as text/link too, not just as a fill — see the ratios
	   below, verified against BOTH --color-bg and --color-surface since
	   this accent sits close enough to the 4.5:1 line that a link inside a
	   card needed its own check. Unchanged by the navy-ground revision
	   above: these ratios were already verified against a dark ground in
	   the same luminance range, so they still clear the same bars. */
	--color-accent:         #4A87FF; /* 5.64:1 on bg, 4.85:1 on surface — safe as text/icon/link on either */
	--color-accent-strong:  #71A0FF; /* hover / lifted state — 7.25:1 on bg */
	--color-accent-dim:     #2E5FCC; /* pressed / active state (fills only — 3.30:1 against --color-accent-ink, not for text-on-bg use) */
	--color-accent-ink:     #0A0F1D; /* text/icon color ON an accent fill — 5.64:1 against --color-accent, same value as --color-bg now that both are this brand's one near-black-navy.
	                                     Light text on accent fails AA (~3.3:1 with --color-text) at every
	                                     step of this ramp, so accent-filled buttons/badges always use this
	                                     dark ink, never --color-text. */

	/* Semantic — success/warning/error/info. Kept visually distinct from
	   --color-accent (different hue, not just different lightness) so
	   status never competes with or gets mistaken for the brand CTA.
	   --color-info is deliberately violet, not blue: blue is already the
	   brand accent here (the inverse of Midnight Broadcast, where amber
	   was the accent and blue was free to use for info). */
	--color-success:  #2FB673; /* 7.14:1 on bg */
	--color-warning:  #FF8A1E; /* 7.89:1 on bg */
	--color-error:    #FF5459; /* 5.91:1 on bg */
	--color-info:     #A78BFA; /* 6.84:1 on bg — violet, reserved for neutral notices only, never CTAs */

	/* ---------------------------------------------------------------
	 * Light section variant — apply `.section--light` (front-page.php
	 * picks specific sections; see template-parts/devices.php,
	 * how-it-works.php, faq.php) to break the otherwise all-dark page
	 * rhythm with a white band. This is a scoped custom-property override,
	 * not a second theme: because every component in this file's sibling
	 * CSS reads color exclusively through var(--color-*) (main.css's own
	 * docblock rule), overriding the tokens here is enough to correctly
	 * re-skin badges/buttons/cards/borders/links inside the section
	 * without touching a single component file.
	 *
	 * --color-accent/-strong/-dim/-ink are NOT the same hex values as the
	 * dark-ground ramp above — the dark ramp's accent (#4A87FF) only
	 * clears AA against near-black (5.50:1); against white it drops to
	 * ~2.9:1 and fails. These are a separate, darker blue ramp verified
	 * against white/off-white specifically (WCAG 2 relative luminance,
	 * same method as the header comment): #2E5FCC = 5.79:1, #1E40AF (hover/
	 * strong) = 8.72:1. Because fill and ink move together here, button/
	 * badge fills stay correctly paired — --color-accent-ink flips to
	 * white (5.79:1 on the new #2E5FCC fill) instead of the dark ramp's
	 * near-black ink, which would fail against this darker fill.
	 * ------------------------------------------------------------- */
	.section--light,
	body.page-template-template-faq,
	body.page-template-template-contact,
	body.page-template-template-tutoriels,
	body.blog,
	body.archive.category,
	body.single-post {
		--color-bg:             #F5F6F8; /* section ground — off-white, not clinical #FFF */
		--color-bg-alt:         #ECEEF1;
		--color-surface:        #FFFFFF; /* cards sit whiter than the ground — same "lighter = raised" logic as the dark ramp, inverted */
		--color-surface-2:      #F0F1F3;
		--color-border:         #E1E4E8; /* decorative hairline, no contrast requirement (same role as the dark ramp's --color-border) */
		--color-border-strong:  #6B7280; /* functional boundary — 4.83:1 on bg, clears AA non-text 3:1 */

		--color-text:        #14171A; /* primary text — >15:1 on bg (AAA) */
		--color-text-muted:  #4B5157; /* secondary text — 8.04:1 on bg (AAA) */
		--color-text-faint:  #6B7280; /* tertiary text — 4.83:1 on bg (AA) */

		--color-accent:         #2E5FCC; /* 5.79:1 on bg — safe as text (section-label, links, badge ink) and as a button/badge fill paired with white ink below */
		--color-accent-strong:  #1E40AF; /* hover/lifted state — 8.72:1 on bg */
		--color-accent-dim:     #16327A; /* pressed/active fill, darker still */
		--color-accent-ink:     #FFFFFF; /* text/icon ON an accent fill — pairs with the darker fill above, NOT the dark ramp's near-black */
	}

	/* body.* above (template-faq/contact/tutoriels, blog/category archive,
	   single posts) makes those pages predominantly white by default — the
	   "expand white beyond the front page" half of the brief. Their shared
	   .page-header (main.css component 12, breadcrumb + H1) is the one
	   "hero-type moment" each of those pages keeps navy, plus the FAQ
	   page's closing CTA card — both apply .section--dark below to opt back
	   OUT of the body-level light override, the same scoped-custom-property
	   technique as .section--light, just reasserting the base dark ramp
	   instead of a light one (needed because a descendant can't just "not
	   inherit" an ancestor's --color-* redefinition). */
	.section--dark {
		--color-bg:             #0A0F1D;
		--color-bg-alt:         #0F1529;
		--color-surface:        #141C32;
		--color-surface-2:      #1B2643;
		--color-border:         #222D4C;
		--color-border-strong:  #7B87A5;

		--color-text:        #F2F4F6;
		--color-text-muted:  #A7ACB3;
		--color-text-faint:  #7B828C;

		--color-accent:         #4A87FF;
		--color-accent-strong:  #71A0FF;
		--color-accent-dim:     #2E5FCC;
		--color-accent-ink:     #0A0F1D;
	}

	/* ---------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------- */

	/* Oswald (display) is condensed by construction — no width axis to
	   pin, its default proportions already ARE the tall/narrow "broadcast
	   lower-third" cut this brand wants, self-hosted as one variable file
	   spanning weights 200-700; see assets/css/fonts.css. Public Sans
	   (body/UI) is a second, unrelated variable file: chosen for being a
	   genuinely neutral humanist grotesque (built for the US Web Design
	   System, so it's tuned for long-form legibility, not personality)
	   that shares nothing with Midnight Broadcast's Inter — a different
	   family, not just a different weight of the same one. */
	--font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--fw-regular:   400;
	--fw-medium:    500;
	--fw-semibold:  600;
	--fw-bold:      700;
	--fw-black:     700; /* Oswald's variable axis tops out at 700 — there is no 900 instance, unlike Midnight Broadcast's Fraunces. Headings use 700 wherever Fraunces would have used --fw-black. */

	/* Type scale — modular, ~1.25 ratio, 1rem body. Same step values as
	   Midnight Broadcast on purpose (this is a structural decision, not a
	   brand one) — what changes per-brand is letter-spacing below, tracked
	   noticeably tighter here to reinforce Oswald's condensed, energetic
	   character; Midnight Broadcast's Fraunces never tracks in past
	   -0.025em. xs-lg stay fixed across breakpoints; xl and up scale
	   fluidly between a 375px and a 1440px viewport via clamp(). Each step
	   pairs a line-height and letter-spacing token — use them together,
	   e.g.: font-size: var(--fs-3xl); line-height: var(--lh-3xl); letter-spacing: var(--ls-3xl); */
	--fs-xs:    0.75rem;   /* 12px — micro-labels, legal/fine print */
	--fs-sm:    0.875rem;  /* 14px — small UI text, badges */
	--fs-base:  1rem;      /* 16px — body */
	--fs-md:    1.125rem;  /* 18px — lead paragraph, emphasized body */
	--fs-lg:    1.25rem;   /* 20px — h6 / small subhead */
	--fs-xl:    clamp(1.25rem, 1.1398rem + 0.0294vw, 1.563rem);   /* 20px → 25px — h5 */
	--fs-2xl:   clamp(1.5rem, 1.3405rem + 0.0425vw, 1.953rem);    /* 24px → 31px — h4 */
	--fs-3xl:   clamp(1.875rem, 1.6757rem + 0.0531vw, 2.441rem);  /* 30px → 39px — h3 */
	--fs-4xl:   clamp(2.25rem, 1.9676rem + 0.0753vw, 3.052rem);   /* 36px → 49px — h2 */
	--fs-5xl:   clamp(2.75rem, 2.375rem + 0.1vw, 3.815rem);       /* 44px → 61px — hero display / h1 */

	--lh-xs:   1.5;
	--lh-sm:   1.5;
	--lh-base: 1.6;   /* Public Sans reads a touch taller per line than Inter at the same leading, so body copy backs off from Midnight Broadcast's 1.65 slightly */
	--lh-md:   1.55;
	--lh-lg:   1.35;
	--lh-xl:   1.2;
	--lh-2xl:  1.15;
	--lh-3xl:  1.1;
	--lh-4xl:  1.04;
	--lh-5xl:  1.0;   /* solid, for hero display — Oswald's tall x-height needs zero extra leading at this size */

	--ls-xs:   0.02em;
	--ls-sm:   0.01em;
	--ls-base: 0em;
	--ls-md:   0em;
	--ls-lg:   -0.01em;
	--ls-xl:   -0.015em;
	--ls-2xl:  -0.02em;
	--ls-3xl:  -0.025em;
	--ls-4xl:  -0.03em;
	--ls-5xl:  -0.035em; /* tightest tracking, hero display — noticeably tighter than Midnight Broadcast's -0.025em ceiling */

	--ls-eyebrow: 0.14em; /* wide tracking for uppercase eyebrow/label text — see section-label component; slightly wider than Midnight Broadcast's 0.12em, Oswald's condensed caps read cramped at the same tracking Fraunces/Inter used */

	/* ---------------------------------------------------------------
	 * Spacing — 8px base scale, expressed in rem so it still respects
	 * a visitor's browser font-size setting.
	 * ------------------------------------------------------------- */
	--space-0:   0;
	--space-1:   0.25rem;  /* 4px  */
	--space-2:   0.5rem;   /* 8px  */
	--space-3:   0.75rem;  /* 12px */
	--space-4:   1rem;     /* 16px */
	--space-5:   1.5rem;   /* 24px */
	--space-6:   2rem;     /* 32px */
	--space-7:   2.5rem;   /* 40px */
	--space-8:   3rem;     /* 48px */
	--space-9:   4rem;     /* 64px */
	--space-10:  5rem;     /* 80px */
	--space-11:  6rem;     /* 96px */
	--space-12:  8rem;     /* 128px */

	/* ---------------------------------------------------------------
	 * Layout — containers, breakpoints, responsive section rhythm.
	 * Breakpoints can't live inside a custom property that a @media
	 * condition reads (CSS has no var() support in media queries), so
	 * these are the canonical numbers — every @media in this theme
	 * uses exactly these, and JS may read them via getComputedStyle().
	 *   mobile:  < 640px   (no query needed, it's the default)
	 *   tablet:  >= 640px
	 *   desktop: >= 1024px
	 *   wide:    >= 1440px
	 * ------------------------------------------------------------- */
	--bp-tablet:  640px;
	--bp-desktop: 1024px;
	--bp-wide:    1440px;

	--container-max:      1440px; /* main content container — widened from 1280px to reduce side gutters on larger screens */
	--container-reading:  720px;  /* narrow measure for text-heavy sections (~65-75ch at body size) */

	--container-padding-inline: 1.25rem; /* mobile gutter, widened below */
	--space-section-y: 4rem; /* mobile section vertical padding, widened below */

	/* ---------------------------------------------------------------
	 * Shape & elevation — SHARP corners everywhere except pills. This is
	 * the single biggest structural break from Midnight Broadcast's
	 * 6-16px rounded scale: 0-4px, full stop, deliberately reading as
	 * scoreboard/lower-third graphics rather than soft app-like glass.
	 * ------------------------------------------------------------- */
	--radius-sm:    2px;   /* inputs, small edges */
	--radius-md:    3px;   /* buttons */
	--radius-lg:    4px;   /* cards, panels — the hard cap this brand allows */
	--radius-xl:    16px;  /* hero photos, devices visual, pricing/testimonial cards + final CTA card, by explicit request — noticeably rounder than the brand's normal sharp-corners rule */
	--radius-full:  999px; /* pills — badges only, see "what to deliberately keep soft" in README */

	/* Dark UI: shadows alone barely read against a near-black ground, so
	   cards pair a shadow with --color-border rather than relying on
	   shadow alone for separation. Navy-tinted shadow (RGB 5/7/13, roughly
	   half of --color-bg's own value) now that the ground itself is navy —
	   this replaces the old neutral-charcoal-tinted rgba(4,5,6,...), which
	   matched a bg hue this theme no longer uses. */
	--shadow-sm:  0 1px 2px rgba(5, 7, 13, 0.6);
	--shadow-md:  0 8px 24px rgba(5, 7, 13, 0.45);
	--shadow-lg:  0 24px 48px -12px rgba(5, 7, 13, 0.55);
	--shadow-accent-glow: 0 0 0 1px rgba(74, 135, 255, 0.35), 0 8px 20px -6px rgba(74, 135, 255, 0.35);

	/* Added while building template-parts/hero.php (Prompt 3): a flat,
	   zero-blur OFFSET shadow — the "hard shadow" a diagonal-cut/clip-path
	   panel needs, since --shadow-sm/md/lg's soft blur reads as generic
	   app elevation, not the stark print/broadcast-graphics look this
	   composition wants. Use with `filter: drop-shadow(...)`, never
	   `box-shadow` — clip-path clips box-shadow into invisibility, but
	   drop-shadow follows the clipped alpha shape correctly. Reusable by
	   any future angular panel, not hero-only, which is why it's a token
	   rather than a hero.css literal. */
	--shadow-hard: 6px 6px 0 0 rgba(5, 7, 13, 0.7);

	/* ---------------------------------------------------------------
	 * Motion — see README.md "Motion principles" for usage rules.
	 * Deliberately faster than Midnight Broadcast's 120/200/400ms —
	 * live-broadcast/scoreboard energy reads as snappy, not calm.
	 * ------------------------------------------------------------- */
	--duration-fast:  90ms;  /* micro-interactions: hover, focus */
	--duration-base:  150ms; /* default: most transitions */
	--duration-slow:  280ms; /* entrances, larger surface changes */

	--ease-standard:    cubic-bezier(0.4, 0, 0.2, 1); /* default — balanced accelerate/decelerate */
	--ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);   /* snappier settle, for things entering the screen */
	--ease-out:         cubic-bezier(0, 0, 0.2, 1);
	--ease-in:          cubic-bezier(0.4, 0, 1, 1);

	/* ---------------------------------------------------------------
	 * Site chrome — added while building template-parts/header.php
	 * (Prompt 2). Nothing existed yet for a fixed/layered header, so these
	 * four are new, not a redefinition of anything above. --header-height
	 * is shorter than Midnight Broadcast's 4.5rem/72px: Oswald's condensed
	 * caps need less vertical room than Fraunces at the same nav/CTA
	 * scale, and a tighter bar reads closer to a broadcast ticker than a
	 * spacious editorial masthead — fits this brand's "compact, snappy"
	 * brief. --header-scroll-threshold stays 80px, matching the prompt's
	 * own "~80px scroll" spec verbatim.
	 * ------------------------------------------------------------- */
	--header-height:            4rem;  /* 64px, constant across breakpoints and scroll state — no layout shift on scroll */
	--header-scroll-threshold:  80px;  /* px, not rem: sets the height of the sentinel element header.css/header.js observe */
	--z-header:        100; /* the fixed header bar */
	--z-header-panel:  90;  /* the mobile full-screen nav panel — below the header bar so its logo/CTA/toggle stay visually on top and clickable while the panel is open */

	/* ---------------------------------------------------------------
	 * Order widget — added while building template-parts/order-widget.php
	 * (the sticky floating WhatsApp/order button + panel, Prompt 13). New,
	 * not a redefinition of the "Site chrome" values above. Sizing/offset
	 * geometry is structural, not brand-specific, so it reuses the exact
	 * same values Midnight Broadcast's equivalent widget settled on.
	 * ------------------------------------------------------------- */
	--order-widget-size:         3.5rem; /* 56px floating button diameter, roomy 44px+ touch target with padding to spare */
	--order-widget-size-condensed: 3rem; /* 48px — condensed state once scrolled past the hero, see order-widget.js */
	--order-widget-offset:       1.25rem; /* distance from the viewport corner, before safe-area-inset is added in order-widget.css */
	--z-order-widget-trigger:  95;  /* above ordinary content, below the header bar (100) so header nav is never visually covered */
	--z-order-widget-panel:    110; /* above the header (100) — the open panel is a true modal, it must cover header nav too, same reasoning as --z-header-panel covering the header's own content */
}

/* Responsive section rhythm — components just use var(--space-section-y)
   and var(--container-padding-inline); they get wider automatically. */
@media (min-width: 640px) {
	:root {
		--space-section-y: 5rem;
		--container-padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--space-section-y: 7rem;
		--container-padding-inline: 2.5rem;
	}
}

@media (min-width: 1440px) {
	:root {
		--space-section-y: 8rem;
	}
}