/*
 * Faiha design tokens and foundation layer (Checkpoint B).
 * Values sourced from docs/07-design-system.md.
 *
 * This file defines tokens and opt-in utility classes only.
 * It does not restyle existing Kadence elements (headings, buttons,
 * body text, layout width) so the current site keeps rendering
 * unchanged until later checkpoints deliberately consume these
 * tokens while building the header, hero, sections, etc.
 */

:root {
	/* Colour: brand */
	--faiha-color-brand: #F23343;
	--faiha-color-brand-strong: #D92032;
	--faiha-color-brand-soft: rgba(242, 51, 67, 0.10);

	/*
	 * Contrast reference (WCAG relative luminance):
	 * white text on --faiha-color-brand        ~3.9:1  (large text / icons / UI only)
	 * white text on --faiha-color-brand-strong  ~5.0:1  (safe for normal-size text)
	 * Use --faiha-color-brand-strong wherever normal-size text sits on a red background.
	 */
	--faiha-on-brand-large: var(--faiha-surface);
	--faiha-on-brand-strong: var(--faiha-surface);

	/* Colour: dark surfaces, darkest to lightest */
	--faiha-navy-900: #04111A;
	--faiha-navy-800: #071824;
	--faiha-navy-700: #091D2A;
	--faiha-navy-600: #0C2433;

	/* Colour: light surfaces */
	--faiha-surface: #FFFFFF;
	--faiha-surface-alt: #F6F8FA;

	/* Colour: text on light surfaces */
	--faiha-text: #111827;
	--faiha-text-secondary: #667085;
	--faiha-text-muted: #98A2B3;

	/* Colour: text on dark surfaces */
	--faiha-text-on-dark: #FFFFFF;
	--faiha-text-on-dark-secondary: rgba(255, 255, 255, 0.72);

	/* Typography */
	--faiha-font-primary: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* Headings, navigation, buttons, eyebrows (loaded with Inter in one Kadence Google Fonts request). */
	--faiha-font-heading: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Weights */
	--faiha-weight-heading: 700;
	--faiha-weight-subheading: 700; /* H3 */
	--faiha-weight-nav: 600;
	--faiha-weight-button: 700;
	--faiha-tracking-heading: -0.02em;

	/* Elevation (light surfaces; dark mode uses borders and surface steps instead) */
	--faiha-shadow-card: 0 1px 2px rgba(4, 17, 26, 0.04), 0 6px 18px rgba(4, 17, 26, 0.05);
	--faiha-shadow-card-hover: 0 2px 4px rgba(4, 17, 26, 0.05), 0 14px 32px rgba(4, 17, 26, 0.09);
	--faiha-shadow-float: 0 10px 30px rgba(4, 17, 26, 0.12), 0 2px 6px rgba(4, 17, 26, 0.06);
	--faiha-shadow-float-strong: 0 16px 40px rgba(4, 17, 26, 0.18), 0 2px 8px rgba(4, 17, 26, 0.08);

	--faiha-text-body: 1rem;
	--faiha-text-h3: clamp(1.3125rem, calc(1.144rem + 0.673vw), 1.75rem);
	--faiha-text-h2: clamp(1.875rem, calc(1.54rem + 1.346vw), 2.75rem);
	--faiha-text-service-h1: clamp(2.25rem, calc(1.673rem + 2.308vw), 3.75rem);
	--faiha-text-hero-h1: clamp(2.375rem, calc(1.654rem + 2.885vw), 4.25rem);
	--faiha-text-hero-rotating: clamp(2.5rem, calc(1.731rem + 3.077vw), 4.5rem);

	/* Spacing scale */
	--faiha-space-3xs: 0.25rem;
	--faiha-space-2xs: 0.5rem;
	--faiha-space-xs: 0.75rem;
	--faiha-space-sm: 1rem;
	--faiha-space-md: 1.5rem;
	--faiha-space-lg: 2rem;
	--faiha-space-xl: 3rem;
	--faiha-space-2xl: 4rem;
	--faiha-space-3xl: 6rem;
	--faiha-space-4xl: 8rem;

	/* Section spacing: fluid between the mobile (64px) and desktop (120px) targets */
	--faiha-space-section: clamp(4rem, calc(2.654rem + 5.385vw), 7.5rem);

	/* Container horizontal padding: fluid between mobile (18px) and desktop (32px) targets */
	--faiha-container-padding: clamp(1.125rem, calc(0.783rem + 1.522vw), 2rem);

	/* Layout */
	--faiha-container-max: 80rem; /* 1280px */
	--faiha-reading-min: 47.5rem; /* 760px */
	--faiha-reading-max: 53.125rem; /* 850px */
	--faiha-reading-width: clamp(var(--faiha-reading-min), 60vw, var(--faiha-reading-max));

	/* Radius */
	--faiha-radius-button: 0.75rem; /* 12px */
	--faiha-radius-card: 1rem; /* 16px */
	--faiha-radius-menu: 1.125rem; /* 18px */
	--faiha-radius-image: 1.125rem; /* 18px */

	/* Motion */
	--faiha-duration-fast: 200ms;
	--faiha-duration-base: 600ms;
	--faiha-duration-theme: 250ms;
	--faiha-stagger: 80ms;
	--faiha-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout: header (Checkpoint C) */
	--faiha-header-height: 5rem; /* 80px, within the approved 78-84px range */
	--faiha-header-offset: 1.25rem; /* 20px gap above the floating desktop header */
}

/*
 * Checkpoint C addition: light/dark surface remap, driven by a
 * `data-theme` attribute on <html> (see theme-toggle.js). Genuinely
 * global — any future section built with the semantic surface/text
 * tokens above picks this up automatically. Nothing currently
 * consumes these tokens as applied styles except the Checkpoint C
 * header, which intentionally reads the raw --faiha-navy-* and
 * --faiha-text-on-dark tokens directly instead, so it stays dark
 * regardless of the toggle (matching the brief's "permanently dark"
 * brand-chrome direction) until hero/footer are opted in the same way.
 */
:root[data-theme="dark"] {
	--faiha-surface: var(--faiha-navy-900);
	--faiha-surface-alt: var(--faiha-navy-800);
	--faiha-text: var(--faiha-text-on-dark);
	--faiha-text-secondary: var(--faiha-text-on-dark-secondary);
	--faiha-text-muted: rgba(255, 255, 255, 0.56);
}

/* ---------------------------------------------------------------- */
/* Safe global foundation: box model, focus and motion only.        */
/* No colour, font or layout property is applied to a live element  */
/* below, so nothing on the current site changes appearance.        */
/* ---------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Theme-toggle transition (Checkpoint C). Inert today: body has no
 * Faiha-token background/text colour applied yet, so nothing visibly
 * animates until a later checkpoint adopts --faiha-surface/--faiha-text
 * on body. Kept global since the toggle is a whole-document concern.
 */
body {
	transition:
		background-color var(--faiha-duration-theme) var(--faiha-ease-standard),
		color var(--faiha-duration-theme) var(--faiha-ease-standard);
}

:focus-visible {
	/*
	 * Longhand outline properties, not the shorthand: Chromium fails to parse
	 * `outline: 2px solid var(...)` and silently drops the whole declaration.
	 */
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--faiha-color-brand-strong);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- */
/* Opt-in utility classes for later checkpoints (header, hero,      */
/* services, etc.) to consume. Unused until then.                   */
/* ---------------------------------------------------------------- */

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

.faiha-prose {
	max-width: var(--faiha-reading-width);
	margin-inline: auto;
}

.faiha-section {
	padding-block: var(--faiha-space-section);
}

.faiha-h1--hero {
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-hero-h1);
	font-weight: 700;
	line-height: 1.05;
}

.faiha-h1--hero-rotating {
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-hero-rotating);
	font-weight: 700;
	line-height: 1.05;
}

.faiha-h1--service {
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-service-h1);
	font-weight: 700;
	line-height: 1.1;
}

.faiha-h2 {
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-h2);
	font-weight: 700;
	line-height: 1.15;
}

.faiha-h3 {
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-h3);
	font-weight: 600;
	line-height: 1.2;
}

.faiha-body {
	font-family: var(--faiha-font-primary);
	font-size: var(--faiha-text-body);
	line-height: 1.6;
}

/*
 * Metric-matched fallbacks: local Arial resized to Manrope / Inter metrics
 * (width via size-adjust, vertical metrics via the overrides; measured in
 * Chrome against the loaded web fonts). While the Google Fonts swap in,
 * text keeps the same size and line breaks, so the swap causes no visible
 * layout shift. Local fonts only; nothing is downloaded.
 */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 800;
	size-adjust: 100.79%;
	ascent-override: 106.16%;
	descent-override: 29.76%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 300 500;
	size-adjust: 100.79%;
	ascent-override: 106.16%;
	descent-override: 29.76%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 300 500;
	size-adjust: 106.31%;
	ascent-override: 91.24%;
	descent-override: 22.58%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 800;
	size-adjust: 106.31%;
	ascent-override: 91.24%;
	descent-override: 22.58%;
	line-gap-override: 0%;
}

/* ---------------------------------------------------------------- */
/* Site typography: Manrope for headings, navigation and buttons,   */
/* Inter for body text. Plain element selectors so they follow       */
/* Kadence's own inline heading rules; component rules that set a    */
/* size or weight still win.                                          */
/* ---------------------------------------------------------------- */

body {
	font-family: var(--faiha-font-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
summary,
.wp-block-button__link,
.wp-element-button {
	font-family: var(--faiha-font-heading);
}

h1,
h2 {
	font-weight: var(--faiha-weight-heading);
	letter-spacing: var(--faiha-tracking-heading);
}

h3,
h4 {
	font-weight: var(--faiha-weight-subheading);
	letter-spacing: -0.01em;
}

/* Button foundation */

.faiha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--faiha-space-2xs);
	padding-block: var(--faiha-space-xs);
	padding-inline: var(--faiha-space-md);
	border-radius: var(--faiha-radius-button);
	border: 1px solid transparent;
	font-family: var(--faiha-font-heading);
	font-weight: var(--faiha-weight-button);
	font-size: var(--faiha-text-body);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--faiha-duration-fast) var(--faiha-ease-standard),
		color var(--faiha-duration-fast) var(--faiha-ease-standard),
		border-color var(--faiha-duration-fast) var(--faiha-ease-standard),
		transform var(--faiha-duration-fast) var(--faiha-ease-standard);
}

/* Solid buttons always use the accessible red so normal-size labels stay readable. */
.faiha-btn--primary {
	background-color: var(--faiha-color-brand-strong);
	color: var(--faiha-on-brand-strong);
}

.faiha-btn--primary:hover,
.faiha-btn--primary:focus-visible {
	background-color: var(--faiha-navy-700);
}

.faiha-btn--secondary {
	background-color: transparent;
	color: var(--faiha-color-brand-strong);
	border-color: currentColor;
}

.faiha-btn--secondary:hover,
.faiha-btn--secondary:focus-visible {
	background-color: var(--faiha-color-brand-soft);
}

.faiha-btn--on-dark {
	background-color: transparent;
	color: var(--faiha-text-on-dark);
	border-color: var(--faiha-text-on-dark);
}

.faiha-btn--on-dark:hover,
.faiha-btn--on-dark:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.faiha-btn {
		transition: none;
	}
}

/* Card foundation */

.faiha-card {
	background-color: var(--faiha-surface);
	color: var(--faiha-text);
	border-radius: var(--faiha-radius-card);
	padding: var(--faiha-space-md);
	box-shadow:
		0 1px 2px rgba(4, 17, 26, 0.06),
		0 8px 24px rgba(4, 17, 26, 0.08);
	transition:
		transform var(--faiha-duration-fast) var(--faiha-ease-standard),
		box-shadow var(--faiha-duration-fast) var(--faiha-ease-standard);
}

.faiha-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 4px 8px rgba(4, 17, 26, 0.08),
		0 16px 32px rgba(4, 17, 26, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.faiha-card:hover {
		transform: none;
	}
}