/**
 * LLCBeacon global design tokens — Phase 1C.
 *
 * SOURCE OF TRUTH: values below are copied directly from the frozen
 * Lovable repository's src/styles.css (:root block, @theme inline block)
 * and src/routes/design-system.tsx (typography scale, control height,
 * focus ring spec). Nothing here is invented — every value traces back
 * to that file. Dark mode (.dark block in the source) is intentionally
 * NOT ported: the approved production direction (CLAUDE.md "Frozen
 * visual direction") specifies a light, white-background system only,
 * and no dark-mode toggle is part of the approved feature set. If that
 * changes, the .dark values are already documented in the Lovable repo
 * and can be added without re-deriving anything.
 *
 * SCOPE: token definitions, plus base document-level and native-WordPress-
 * block-element styling (buttons, inputs, tables, focus states) that is
 * genuinely global across every future template — not homepage/header/
 * footer/service-page specific markup, which is out of scope until
 * Phase 1D+.
 */

/* ------------------------------------------------------------------ *
 * 1. Color tokens (oklch, matching the frozen source exactly)
 * ------------------------------------------------------------------ */

:root {
	--llcb-background: oklch(1 0 0);
	--llcb-foreground: oklch(0.21 0.04 260);
	--llcb-surface: oklch(0.976 0.005 250);
	--llcb-card: oklch(1 0 0);
	--llcb-card-foreground: oklch(0.21 0.04 260);

	--llcb-primary: oklch(0.55 0.19 258);
	--llcb-primary-foreground: oklch(0.99 0.002 250);
	--llcb-primary-hover: oklch(0.47 0.18 258);

	--llcb-secondary: oklch(0.96 0.008 250);
	--llcb-secondary-foreground: oklch(0.27 0.05 260);

	--llcb-navy: oklch(0.26 0.06 262);
	--llcb-navy-foreground: oklch(0.98 0.003 250);

	--llcb-muted: oklch(0.968 0.006 250);
	--llcb-muted-foreground: oklch(0.52 0.03 258);

	--llcb-accent: oklch(0.955 0.02 245);
	--llcb-accent-foreground: oklch(0.3 0.09 258);

	--llcb-emerald: oklch(0.6 0.13 163);
	--llcb-emerald-foreground: oklch(0.99 0.002 250);
	--llcb-success: oklch(0.62 0.14 155);
	--llcb-success-foreground: oklch(0.99 0.002 250);
	--llcb-warning: oklch(0.72 0.16 62);
	--llcb-warning-foreground: oklch(0.21 0.04 260);
	--llcb-destructive: oklch(0.58 0.23 27);
	--llcb-destructive-foreground: oklch(0.99 0.002 250);

	--llcb-border: oklch(0.925 0.008 255);
	--llcb-input: oklch(0.925 0.008 255);
	--llcb-ring: oklch(0.55 0.19 258);

	/* Hex fallbacks for browsers without oklch() support (pre-2023
	   engines) — computed via the standard OKLab→linear-sRGB→sRGB
	   transform, not eyeballed. Only used inside @supports not(). */
}

@supports not (color: oklch(0 0 0)) {
	:root {
		--llcb-background: #ffffff;
		--llcb-foreground: #0d182b;
		--llcb-surface: #f5f7fa;
		--llcb-card: #ffffff;
		--llcb-card-foreground: #0d182b;
		--llcb-primary: #156cdd;
		--llcb-primary-foreground: #ffffff;
		--llcb-primary-hover: #0054bd;
		--llcb-secondary: #eef2f7;
		--llcb-secondary-foreground: #24304a;
		--llcb-navy: #132341;
		--llcb-navy-foreground: #f8fafc;
		--llcb-muted: #f1f5f8;
		--llcb-muted-foreground: #5e6a7b;
		--llcb-accent: #e6f2fd;
		--llcb-accent-foreground: #1f3a63;
		--llcb-emerald: #009869;
		--llcb-emerald-foreground: #ffffff;
		--llcb-success: #269e5f;
		--llcb-success-foreground: #ffffff;
		--llcb-warning: #ea8a18;
		--llcb-warning-foreground: #0d182b;
		--llcb-destructive: #e3121e;
		--llcb-destructive-foreground: #ffffff;
		--llcb-border: #e3e7ec;
		--llcb-input: #e3e7ec;
		--llcb-ring: #156cdd;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Radius scale — computed from a single base, exactly as the
 * frozen source derives radius-sm..4xl from --radius: 0.75rem.
 * ------------------------------------------------------------------ */

:root {
	--llcb-radius: 0.75rem;
	--llcb-radius-sm: calc(var(--llcb-radius) - 4px);
	--llcb-radius-md: calc(var(--llcb-radius) - 2px);
	--llcb-radius-lg: var(--llcb-radius);
	--llcb-radius-xl: calc(var(--llcb-radius) + 4px);
	--llcb-radius-2xl: calc(var(--llcb-radius) + 8px);
	--llcb-radius-3xl: calc(var(--llcb-radius) + 12px);
	--llcb-radius-4xl: calc(var(--llcb-radius) + 16px);
}

/* ------------------------------------------------------------------ *
 * 3. Shadows — identical oklch-based values to the frozen source.
 * Not yet applied to any component markup (no cards/CTAs exist until
 * templates are built in Phase 1D+) — defined here so later phases
 * reference one source instead of re-deriving these.
 * ------------------------------------------------------------------ */

:root {
	--llcb-shadow-card: 0 1px 2px oklch(0.25 0.06 260 / 0.04), 0 8px 24px -12px oklch(0.25 0.06 260 / 0.12);
	--llcb-shadow-elevated: 0 2px 4px oklch(0.25 0.06 260 / 0.05), 0 24px 48px -20px oklch(0.25 0.06 260 / 0.22);
	--llcb-shadow-cta: 0 10px 24px -12px oklch(0.55 0.19 258 / 0.55);
}

/* ------------------------------------------------------------------ *
 * 4. Layout rhythm — container width, prose measure, section spacing.
 * Values and variable names match the frozen source's own names
 * (--container-max, --measure, --section-y, --section-y-lg,
 * --section-y-tight) so template work in later phases can reuse them
 * without translation.
 * ------------------------------------------------------------------ */

:root {
	--container-max: 76rem;
	--measure: 46rem;
	--section-y: 4rem;
	--section-y-lg: 5.5rem;
	--section-y-tight: 2.5rem;
}

/* ------------------------------------------------------------------ *
 * 5. Typography — font family and base type scale.
 *
 * Type scale reference (from the frozen design-system route):
 *   Display        48-56px  extrabold (800)  leading 1.1
 *   Heading 2      30px     extrabold (800)
 *   Heading 3      20px     bold (700)
 *   Body           16px     regular (400)
 *   Small          14px     regular, muted-foreground
 *   Eyebrow        12px     semibold (600), uppercase, tracking 0.18em
 * ------------------------------------------------------------------ */

:root {
	--llcb-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--llcb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/*
 * NOTE ON SPECIFICITY: Kadence outputs its own base typography/color
 * rules (driven by its Global Palette Customizer settings) as an
 * inline <style> block placed after every enqueued stylesheet,
 * including this one. A plain `body { ... }` here would lose that
 * cascade tie every time regardless of enqueue order, since Kadence's
 * inline block always renders last. The extra `html` ancestor below
 * is not decorative — it raises specificity from (0,0,0,1) to
 * (0,0,0,2), which reliably wins against Kadence's plain-element
 * rules independent of source order, while staying low enough that
 * any real component-level Kadence Block class (much higher
 * specificity) can still override it intentionally later.
 */

html body {
	background-color: var(--llcb-background);
	color: var(--llcb-foreground);
	font-family: var(--llcb-font-sans);
	-webkit-font-smoothing: antialiased;
}

html h1, html h2, html h3, html h4 {
	font-family: var(--llcb-font-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

html body a {
	color: var(--llcb-primary);
}

/* ------------------------------------------------------------------ *
 * 6. Focus state — "2px ring + 2px offset" on every interactive
 * element, per the frozen design-system reference.
 * ------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--llcb-ring);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 7. Native WordPress/Kadence block elements — the only markup that
 * exists globally before any template is built. Buttons, form fields,
 * and tables here are core Gutenberg/Kadence output, not custom
 * component markup — styling them now is a global-foundation concern,
 * not template-building.
 * ------------------------------------------------------------------ */

html body .wp-element-button,
html body .wp-block-button__link,
html body button:not(.kb-button):not([class*="kt-"]):not([class*="llcb-"]) {
	background-color: var(--llcb-primary);
	color: var(--llcb-primary-foreground);
	border-radius: var(--llcb-radius-md);
	font-family: var(--llcb-font-sans);
	font-weight: 500;
	transition: background-color 0.2s ease;
}

html body .wp-element-button:hover,
html body .wp-block-button__link:hover {
	background-color: var(--llcb-primary-hover);
}

html body input[type="text"],
html body input[type="email"],
html body input[type="url"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="number"],
html body textarea,
html body select {
	border: 1px solid var(--llcb-input);
	border-radius: var(--llcb-radius-md);
	font-family: var(--llcb-font-sans);
	background-color: var(--llcb-background);
	color: var(--llcb-foreground);
}

html body table {
	border-collapse: collapse;
	font-size: 0.875rem;
}

html body table th {
	color: var(--llcb-muted-foreground);
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid var(--llcb-border);
}

html body table td {
	border-bottom: 1px solid var(--llcb-border);
}

/* ------------------------------------------------------------------ *
 * 8. Reduced motion — identical behavior to the frozen source: every
 * animation/transition collapses to effectively instant, and smooth
 * scroll is disabled.
 * ------------------------------------------------------------------ */

@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;
	}
}