/* ==========================================================================
   renovation911 — tokens.css
   Design tokens for the premium revision (white + deep navy, one warm gold
   accent used sparingly). Variable NAMES are stable: every downstream sheet
   consumes these and never hard-codes a colour, radius, shadow or duration.

   Load order: tokens.css -> base.css -> layout.css -> chrome.css
               -> components.css -> pages.css
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS

   Enqueued in inc/enqueue.php (RENO911_FONTS_URL), with preconnects:
   https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap

   Manrope carries every heading, label and button: a modern geometric-humanist
   sans with generous counters that reads as considered rather than technical.
   Inter carries running copy. Fallback faces are metric-adjusted so a failed
   font request does not reflow the page.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Manrope Fallback";
	src: local("Segoe UI"), local("Arial"), local("Helvetica");
	size-adjust: 102%;
	ascent-override: 93%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}


:root {

	/* ======================================================================
	   2. COLOUR
	   ====================================================================== */

	/* --- Ink ------------------------------------------------------------ */
	--ink:                #101828;   /* body copy */
	--ink-muted:          #4B5B70;   /* captions, leads, excerpts */

	/* --- Navy: sampled from brand/logo-navy.png (#0C2A4D). The primary IS
	       the logo. ---------------------------------------------------------- */
	--navy:               #0C2A4D;   /* headings, nav, primary buttons */
	--navy-deep:          #071B35;   /* footer, dark bands, hero scrim */
	--navy-mid:           #163E73;   /* primary button hover, gradients */
	--navy-link:          #1B4C8A;   /* inline links */
	--navy-soft:          #EEF3F9;   /* tinted bands, placeholders */
	--blue:               #2463D1;   /* interactive highlight (link hover, focus) */
	--blue-soft:          #E8F0FC;   /* icon tiles, subtle highlights */

	/* --- Surfaces ------------------------------------------------------- */
	--surface:            #FFFFFF;
	--surface-alt:        #F6F8FB;
	--line:               #E3E9F0;   /* decorative hairlines, card borders at rest */
	--line-strong:        #7A8DA6;   /* real UI boundaries: inputs, outlines (>= 3:1) */

	/* --- Accent: a restrained gold. On LIGHT surfaces the deep value is
	       text-safe; on DARK surfaces the bright value is used. It marks
	       eyebrows, rules, icons and hover tints — never a whole button. --- */
	--accent:             #8F6B22;   /* text-safe on white (4.7:1) */
	--accent-hover:       #6F5119;
	--accent-bright:      #E4B95F;   /* on navy (9.1:1) */
	--accent-bright-hover:#F0CB7A;
	--gold-line:          #D9C48F;   /* decorative gold hairline on light */

	/* --- On dark -------------------------------------------------------- */
	--on-navy:            #C9D8EA;
	--on-navy-dim:        #9FB3CC;

	/* --- Form / state --------------------------------------------------- */
	--placeholder:        #6B7A8F;
	--danger:             #B42318;

	/* --- Decorative ----------------------------------------------------- */
	--ghost:              #E9EFF6;   /* ghost numerals */
	--ghost-hover:        #F3E9D2;

	/* --- Focus ring ----------------------------------------------------- */
	--focus-inner:        #1B4C8A;
	--focus-outer:        #FFFFFF;
	--focus-width:        3px;

	/* --- Hero scrim ------------------------------------------------------
	       A directional wash: strong on the copy side, almost clear on the
	       photo side, so the photograph still reads as a photograph. -------- */
	--scrim-flat:         rgba(7, 27, 53, .22);
	--scrim-angle:        linear-gradient(92deg,
	                        rgba(7, 27, 53, .90)   0%,
	                        rgba(7, 27, 53, .78)  34%,
	                        rgba(7, 27, 53, .38)  62%,
	                        rgba(7, 27, 53, .06) 100%);
	--scrim-photo-band:   rgba(7, 27, 53, .16);

	/* --- Gradients ------------------------------------------------------ */
	--grad-navy:          linear-gradient(135deg, #0F3160 0%, #0C2A4D 45%, #071B35 100%);
	--grad-navy-soft:     linear-gradient(180deg, #FFFFFF 0%, #F3F7FB 100%);
	--grad-gold:          linear-gradient(90deg, #E4B95F, #C9A24A);

	/* --- Hairlines on dark ---------------------------------------------- */
	--line-on-dark:       rgba(255, 255, 255, .14);
	--border-on-dark:     rgba(255, 255, 255, .78);
	--backdrop:           rgba(7, 27, 53, .55);
	--backdrop-strong:    rgba(7, 27, 53, .94);
	--veil:               rgba(7, 27, 53, .30);
	--glass:              rgba(255, 255, 255, .92);


	/* ======================================================================
	   3. TYPE
	   ====================================================================== */

	--font-display: "Manrope", "Manrope Fallback", "Segoe UI", Arial, sans-serif;
	--font-body:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
	                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-stretch-display: 100%;

	/* Fluid scale, 320px -> 1280px viewport. */
	--fs-xs:      clamp(0.8125rem, 0.792rem + 0.10vw, 0.875rem);   /* 13 -> 14 */
	--fs-sm:      clamp(0.875rem,  0.854rem + 0.10vw, 0.9375rem);  /* 14 -> 15 */
	--fs-base:    clamp(1rem,      0.958rem + 0.21vw, 1.125rem);   /* 16 -> 18 */
	--fs-md:      clamp(1.125rem,  1.063rem + 0.31vw, 1.3125rem);  /* 18 -> 21 */
	--fs-lg:      clamp(1.25rem,   1.167rem + 0.42vw, 1.5rem);     /* 20 -> 24 */
	--fs-xl:      clamp(1.625rem,  1.375rem + 1.25vw, 2.375rem);   /* 26 -> 38 */
	--fs-2xl:     clamp(2.125rem,  1.708rem + 2.08vw, 3.375rem);   /* 34 -> 54 · inner h1 */
	--fs-3xl:     clamp(2.5rem,    1.875rem + 3.13vw, 4.375rem);   /* 40 -> 70 · home h1 */
	--fs-numeral: clamp(2.5rem,    2rem     + 2.50vw, 4rem);

	/* H1 step-down by character count (data-len="short|mid|long"). */
	--h1-scale:       1;
	--h1-scale-short: 1;
	--h1-scale-mid:   .9;
	--h1-scale-long:  .78;

	/* Line-height */
	--lh-h1:      1.02;
	--lh-h1-page: 1.06;
	--lh-h2:      1.12;
	--lh-h3:      1.22;
	--lh-h4:      1.32;
	--lh-body:    1.7;
	--lh-lead:    1.6;
	--lh-tight:   1.3;
	--lh-flat:    1;

	/* Letter-spacing */
	--ls-h1:      -0.03em;
	--ls-h2:      -0.025em;
	--ls-h3:      -0.015em;
	--ls-eyebrow:  0.16em;
	--ls-btn:      0.02em;
	--ls-nav:      0;
	--ls-caps:     0.12em;
	--ls-numeral: -0.04em;

	/* Weight */
	--fw-body:    400;
	--fw-medium:  500;
	--fw-strong:  600;
	--fw-bold:    700;
	--fw-black:   800;

	/* Measure */
	--measure:        66ch;
	--measure-lead:   58ch;
	--measure-hero:   44ch;
	--measure-card:   40ch;
	--measure-quote:  46ch;


	/* ======================================================================
	   4. SPACE
	   ====================================================================== */

	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  20px;
	--sp-6:  24px;
	--sp-7:  32px;
	--sp-8:  40px;
	--sp-9:  48px;
	--sp-10: 64px;
	--sp-11: 80px;
	--sp-12: 96px;
	--sp-13: 128px;

	--section-y:    clamp(3.5rem, 2.25rem + 5.5vw, 7rem);      /* 56 -> 112 */
	--section-y-lg: clamp(4.5rem, 3rem + 7.5vw, 8.5rem);       /* 72 -> 136 */
	--gutter:       clamp(1.25rem, 0.75rem + 2vw, 2rem);       /* 20 -> 32 */
	--grid-gap:     clamp(20px, 2.2vw, 36px);
	--grid-cols:    12;


	/* ======================================================================
	   5. RADIUS — soft, consistent, never pill-shaped except icon buttons.
	   ====================================================================== */

	--r-1:    6px;    /* chips, badges */
	--r-2:    10px;   /* buttons, inputs */
	--r-3:    16px;   /* cards, panels, image frames */
	--r-4:    24px;   /* large panels, lightbox image */
	--r-full: 999px;  /* icon buttons */


	/* ======================================================================
	   6. SHADOW — soft, navy-tinted, deep on lift.
	   ====================================================================== */

	--sh-0:     none;
	--sh-1:     0 1px 2px rgba(12, 42, 77, .05), 0 1px 1px rgba(12, 42, 77, .03);
	--sh-2:     0 2px 6px rgba(12, 42, 77, .05), 0 12px 28px -10px rgba(12, 42, 77, .16);
	--sh-3:     0 4px 12px rgba(12, 42, 77, .06), 0 28px 56px -18px rgba(12, 42, 77, .28);
	--sh-panel: 0 36px 72px -24px rgba(7, 27, 53, .45), 0 8px 20px -8px rgba(7, 27, 53, .18);
	--sh-inset: inset 0 0 0 1px var(--line);

	/* Legacy offset frame — kept resolvable, no longer used for lift. */
	--frame-offset: var(--navy-soft);
	--frame-shadow: var(--sh-2);


	/* ======================================================================
	   7. CONTAINERS
	   ====================================================================== */

	--container:        min(1240px, 100% - 2 * var(--gutter));
	--container-wide:   min(1400px, 100% - 2 * var(--gutter));
	--container-header: min(1480px, 100% - 2 * var(--gutter));
	--container-prose:  min(780px,  100% - 2 * var(--gutter));


	/* ======================================================================
	   8. BREAKPOINTS (unitless, read by main.js)
	   ====================================================================== */

	--bp-xs:        480;
	--bp-sm:        640;
	--bp-md:        768;
	--bp-lg:        900;
	--bp-xl:        1024;
	--bp-nav:       1200;
	--bp-nav-full:  1500;


	/* ======================================================================
	   9. MOTION — quiet. One easing, short durations, opacity-led reveals.
	   ====================================================================== */

	--ease:        cubic-bezier(.2, .7, .2, 1);
	--ease-drawer: cubic-bezier(.2, .8, .2, 1);
	--t-fast:      160ms;
	--t:           220ms;
	--t-slow:      360ms;
	--t-drawer:    260ms;
	--t-panel:     160ms;
	--t-reveal:    640ms;


	/* ======================================================================
	   10. LAYERS
	   ====================================================================== */

	--z-base:     1;
	--z-frame:    5;
	--z-sticky:   50;
	--z-callbar:  90;
	--z-header:   100;
	--z-panel:    120;
	--z-backdrop: 200;
	--z-drawer:   210;
	--z-skip:     1000;


	/* ======================================================================
	   11. CHROME METRICS
	   ====================================================================== */

	--topbar-h:        40px;
	--header-h:        70px;
	--header-h-md:     80px;
	--header-h-lg:     88px;
	--logo-h:          40px;
	--logo-h-md:       46px;
	--logo-h-lg:       54px;
	--callbar-h:       64px;
	--scroll-offset:   96px;
	--tap-min:         44px;
	--tap-primary:     50px;

	--focal-default: 50% 58%;
}


/* ==========================================================================
   12. PRIMITIVE UTILITIES
   ========================================================================== */

html {
	scroll-padding-top: var(--scroll-offset);
}

.container {
	width: var(--container);
	margin-inline: auto;
}

.container--wide   { width: var(--container-wide); }
.container--header { width: var(--container-header); }
.container--prose  { width: var(--container-prose); }

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--z-skip);
	transform: translateY(-120%);
	padding: var(--sp-3) var(--sp-5);
	background: var(--navy);
	color: var(--surface);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-btn);
	text-decoration: none;
	border-radius: 0 0 var(--r-2) 0;
	transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
	outline: var(--focus-width) solid var(--focus-inner);
	outline-offset: 0;
	box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-outer);
	border-radius: var(--r-2);
}

:where(.section--navy, .section--deep, .site-footer, .topbar, .drawer__foot,
       .contact-card, .hero, .page-hero--photo, .lightbox, .call-band, .quote-band--deep)
	:where(a, button, input, textarea, [tabindex]):focus-visible {
	outline-color: var(--focus-outer);
	box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-inner);
}

:where(a, button, input, select, textarea):focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {

	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}
}