/**
 * Fontrova design tokens - "Minimalist Modern".
 *
 * Deliberately small. Elementor owns the design system:
 *
 *   - Colour and font values live in Elementor Global Variables (Editor V4),
 *     which print as `:root { --fds-accent: #0052FF; ... }` in the active kit's
 *     stylesheet. Edit them in Site Settings > Variables, never here.
 *   - Component styling lives in Elementor Global Classes (`fds-btn-primary`,
 *     `fds-card`, ...), so it stays editable in the panel.
 *
 * This file only carries what neither of those can express:
 *   1. Fallback values, at zero specificity, for requests with no kit CSS.
 *   2. Derived tokens (shadows, gradient, radii, section rhythm).
 *   3. The dark-mode remap - Elementor variables are flat, so the dark palette
 *      is stored as its own `--fds-dark-*` set and swapped onto the semantic
 *      names here.
 *   4. Keyframes, gradient text, dot texture, reduced-motion.
 *
 * NAMESPACE: `fds-` (Fontrova Design System), for both custom properties and
 * class names. `fr-` is NOT available: Fontrova Core already owns it for the
 * generator's own scoped variables (`--fr-bg`, `--fr-accent`, `--fr-border`)
 * and its own markup (`.fr-card`, `.fr-panel`, `.fr-chip`, `.fr-input`).
 * Sharing that prefix would have let site tokens leak into the tool the moment
 * Core stopped declaring one of its own values.
 *
 * @package Fontrova_UI_Fix
 */

/* -------------------------------------------------------------------------
 * 1. Fallbacks.
 *
 * `:where()` has zero specificity, so every declaration below loses to the
 * `:root { ... }` block Elementor prints. These only apply if the kit CSS is
 * missing (cache flush, Elementor disabled), which keeps the Variables Manager
 * the single source of truth for the light palette.
 * ---------------------------------------------------------------------- */

:where(:root) {
	--fds-bg: #fafafa;
	--fds-card: #ffffff;
	--fds-foreground: #0f172a;
	--fds-muted: #f1f5f9;
	--fds-muted-foreground: #5f6f84;
	--fds-accent: #0052ff;
	--fds-accent-secondary: #4d7cff;
	--fds-accent-tint: rgba( 0, 82, 255, 0.05 );
	--fds-accent-line: rgba( 0, 82, 255, 0.3 );
	--fds-accent-text: #0052ff;
	--fds-border: #e2e8f0;

	--fds-dark-bg: #0b1220;
	--fds-dark-card: #131b2e;
	--fds-dark-foreground: #f1f5f9;
	--fds-dark-muted: #1b2436;
	--fds-dark-muted-foreground: #94a3b8;
	--fds-dark-border: #243047;

	--fds-font-heading: Calistoga;
	--fds-font-body: Inter;
	--fds-font-mono: "JetBrains Mono";
}

/* -------------------------------------------------------------------------
 * 2. Derived tokens.
 *
 * Composed from the variables above, so re-theming from the Variables Manager
 * carries through to every shadow, glow and gradient without edits here.
 * ---------------------------------------------------------------------- */

:where(:root) {
	/* The signature gradient. Primary buttons are never a flat accent fill. */
	--fds-gradient: linear-gradient( 135deg, var( --fds-accent ), var( --fds-gradient-end, #2e63ff ) );
	--fds-gradient-h: linear-gradient( to right, var( --fds-accent ), var( --fds-gradient-end, #2e63ff ) );

	/* Full font stacks, with real fallbacks for the swap period. */
	--fds-stack-heading: var( --fds-font-heading ), Georgia, "Times New Roman", serif;
	--fds-stack-body: var( --fds-font-body ), system-ui, -apple-system, "Segoe UI", sans-serif;
	--fds-stack-mono: var( --fds-font-mono ), ui-monospace, "SF Mono", Menlo, monospace;

	/* Shadows tint toward the ink hue rather than flat black - the ground is
	   warm off-white and a neutral black shadow reads as dirt on it. */
	--fds-shadow-sm: 0 1px 3px rgba( 15, 23, 42, 0.06 );
	--fds-shadow-md: 0 4px 6px rgba( 15, 23, 42, 0.07 );
	--fds-shadow-lg: 0 10px 15px rgba( 15, 23, 42, 0.08 );
	--fds-shadow-xl: 0 20px 25px rgba( 15, 23, 42, 0.1 );
	--fds-shadow-accent: 0 4px 14px rgba( 0, 82, 255, 0.25 );
	--fds-shadow-accent-lg: 0 8px 24px rgba( 0, 82, 255, 0.35 );

	/* Radii. Four values, no fifth - see the design system's Shapes rule. */
	--fds-radius-sm: 8px;
	--fds-radius-md: 12px;
	--fds-radius-lg: 16px;
	--fds-radius-pill: 999px;

	/* Spacing. `--fds-space-xl` is the section rhythm and is meant to feel
	   uncomfortably generous; it is the primary pacing tool. */
	--fds-space-sm: 8px;
	--fds-space-md: 20px;
	--fds-space-lg: 40px;
	--fds-space-xl: 112px;

	--fds-container: 72rem;
	--fds-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* -------------------------------------------------------------------------
 * 3. Dark mode.
 *
 * Elementor Global Variables are flat values with no mode awareness, so the
 * dark palette is stored beside the light one as `--fds-dark-*` and remapped
 * onto the semantic names here. Both halves stay editable in the same panel.
 *
 * The attribute is `data-theme` on `<html>`, which is the contract the theme
 * toggle in the `fontrova-brand` mu-plugin already writes - reused rather than
 * replaced so one control drives one system.
 *
 * `:root[data-theme]` (0,2,0) outranks Elementor's `:root` (0,1,0), so the
 * swap wins without `!important`. Default is the OS preference; an explicit
 * choice on the root element overrides it in both directions.
 * ---------------------------------------------------------------------- */

@media ( prefers-color-scheme: dark ) {

	:root:not( [data-theme="light"] ) {
		--fds-bg: var( --fds-dark-bg );
		--fds-card: var( --fds-dark-card );
		--fds-foreground: var( --fds-dark-foreground );
		--fds-muted: var( --fds-dark-muted );
		--fds-muted-foreground: var( --fds-dark-muted-foreground );
		--fds-border: var( --fds-dark-border );
		/* Accent used AS TEXT needs the lighter cobalt on dark: #0052FF measures
	   3.2:1 behind the badge tint here, #4D7CFF measures 4.9:1. Accent FILLS
	   are unchanged, since white on #0052FF already passes. */
	--fds-accent-text: var( --fds-accent-secondary );
		--fds-shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.4 );
		--fds-shadow-md: 0 4px 6px rgba( 0, 0, 0, 0.45 );
		--fds-shadow-lg: 0 10px 15px rgba( 0, 0, 0, 0.5 );
		--fds-shadow-xl: 0 20px 25px rgba( 0, 0, 0, 0.55 );
	}
}

:root[data-theme="dark"] {
	--fds-bg: var( --fds-dark-bg );
	--fds-card: var( --fds-dark-card );
	--fds-foreground: var( --fds-dark-foreground );
	--fds-muted: var( --fds-dark-muted );
	--fds-muted-foreground: var( --fds-dark-muted-foreground );
	--fds-border: var( --fds-dark-border );
	/* Accent used AS TEXT needs the lighter cobalt on dark: #0052FF measures
	   3.2:1 behind the badge tint here, #4D7CFF measures 4.9:1. Accent FILLS
	   are unchanged, since white on #0052FF already passes. */
	--fds-accent-text: var( --fds-accent-secondary );
	--fds-shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.4 );
	--fds-shadow-md: 0 4px 6px rgba( 0, 0, 0, 0.45 );
	--fds-shadow-lg: 0 10px 15px rgba( 0, 0, 0, 0.5 );
	--fds-shadow-xl: 0 20px 25px rgba( 0, 0, 0, 0.55 );
}

/* The inverted section is a designed contrast moment, not a theme. It pins
 * the ink-on-light relationship regardless of which theme is active, so it
 * reads the same in both - and it re-points the semantic names inside itself
 * so nested cards and buttons follow without per-element overrides. */
.fds-inverted-section {
	/* The band is dark in both themes, so accent-as-text needs the dark pair
	   here too: #0052FF on this ground measures 3.0:1. */
	--fds-accent-text: var( --fds-accent-secondary );
	--fds-bg: #0f172a;
	--fds-card: #1a2540;
	--fds-foreground: #ffffff;
	--fds-muted: #1e293b;
	--fds-muted-foreground: #94a3b8;
	--fds-border: #243047;
}

/* -------------------------------------------------------------------------
 * 4. Base typography binding.
 *
 * Bound to the stacks, not to raw family names, so the pairing survives a
 * font swap in the Variables Manager. Calistoga is capped at h1/h2 - it has a
 * single weight and turns muddy below display sizes.
 * ---------------------------------------------------------------------- */

body {
	font-family: var( --fds-stack-body );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
	font-family: var( --fds-stack-heading );
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

h3,
h4,
h5,
h6 {
	font-family: var( --fds-stack-body );
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
 * 5. Effects the Editor V4 style schema cannot express.
 *
 * Everything else - padding, colour, radius, shadow, hover - is an Elementor
 * Global Class and stays editable in the panel. Only these live in CSS.
 * ---------------------------------------------------------------------- */

/* Gradient text. `background-clip: text` has no schema equivalent. */
.fds-gradient-text {
	background: var( --fds-gradient-h );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Highlighted word in a display heading.
 *
 * Elementor's rich-text sanitiser strips `class` from inline markup, so a
 * highlighted word arrives as a bare <span>. Inside a display heading that is
 * unambiguous - a span there exists to be highlighted - so the gradient is
 * bound to the element rather than to a class that cannot survive the save. */
.fds-display span,
.fds-h2 span {
	background: var( --fds-gradient-h );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* FAQ accordion.
 *
 * Native <details>/<summary>: open/close, keyboard support and screen-reader
 * semantics come from the browser, so there is no JavaScript to ship and
 * nothing to break if a script fails to load. */
.fds-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fds-faq details {
	background: var( --fds-card );
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-md );
	transition: border-color 200ms var( --fds-ease );
}

.fds-faq details[open] {
	border-color: var( --fds-accent-line );
}

.fds-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	cursor: pointer;
	list-style: none;
	font-family: var( --fds-stack-body );
	font-size: 16px;
	font-weight: 600;
	color: var( --fds-foreground );
}

.fds-faq summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn from two borders - no icon font, no inline SVG per item. */
.fds-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-inline-end: 3px;
	border-right: 2px solid var( --fds-accent );
	border-bottom: 2px solid var( --fds-accent );
	transform: rotate( 45deg );
	transition: transform 200ms var( --fds-ease );
}

.fds-faq details[open] summary::after {
	transform: rotate( -135deg );
}

.fds-faq summary:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: -2px;
	border-radius: var( --fds-radius-md );
}

.fds-faq-a {
	margin: 0;
	padding: 0 24px 20px;
	color: var( --fds-muted-foreground );
	line-height: 1.7;
}

/* Breadcrumb row. Sits above the H1 on every non-homepage tool page. */
.fds-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var( --fds-stack-body );
	font-size: 14px;
	color: var( --fds-muted-foreground );
}

.fds-crumb a {
	color: var( --fds-muted-foreground );
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.fds-crumb a:hover,
.fds-crumb a:focus-visible {
	color: var( --fds-accent-text );
	border-bottom-color: currentColor;
}

.fds-crumb [aria-current="page"] {
	color: var( --fds-foreground );
}

/* Trust strip: short proof points directly under the tool. Dot separators are
 * drawn rather than typed, so screen readers do not announce them. */
.fds-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var( --fds-stack-mono );
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

.fds-trust li {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.fds-trust li + li::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	margin-inline-end: 22px;
	border-radius: 50%;
	background: var( --fds-accent );
	opacity: 0.55;
}


/* Decision list: situation on the left, the tool that handles it on the right.
 * Deliberately a list and not cards - it is meant to be scanned, not browsed. */
.fds-decision {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --fds-border );
}

.fds-decision li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var( --fds-border );
	font-family: var( --fds-stack-body );
	font-size: 15.5px;
	line-height: 1.6;
	color: var( --fds-muted-foreground );
}

.fds-decision b {
	flex: 1 1 20rem;
	font-weight: 400;
	color: var( --fds-foreground );
}

.fds-decision a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var( --fds-accent-text );
	text-decoration: none;
}

.fds-decision a::after {
	content: "\2192";
	transition: transform 200ms var( --fds-ease );
}

.fds-decision a:hover::after,
.fds-decision a:focus-visible::after {
	transform: translateX( 3px );
}

/* Dot texture for inverted sections - felt, not seen, at 3%. */
.fds-dot-texture {
	position: relative;
	isolation: isolate;
}

.fds-dot-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.03;
	background-image: radial-gradient( circle, #ffffff 1px, transparent 1px );
	background-size: 32px 32px;
}

/* Button rows wrap rather than overflow on narrow screens. */
.fds-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* The pulsing dot in a section-label badge. Slow enough to register as
 * "alive" rather than as an animation. */
@keyframes fds-pulse {

	0%,
	100% {
		transform: scale( 1 );
		opacity: 1;
	}

	50% {
		transform: scale( 1.3 );
		opacity: 0.7;
	}
}

.fds-pulse {
	animation: fds-pulse 2.4s var( --fds-ease ) infinite;
}

/* -------------------------------------------------------------------------
 * 6. Reduced motion. Non-negotiable per the design system.
 * ---------------------------------------------------------------------- */

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

	.fds-pulse {
		animation: none;
	}

	/* Collapse the lift-and-settle on every token-driven component. */
	[class*="fds-btn"],
	[class*="fds-card"] {
		transition: none !important;
		transform: none !important;
	}
}