/* ================================================================
   The Longevity Edge — Design Tokens (CSS variables)
   Source of truth: /Redesign/01-design-system/design-tokens.json
   Mirrored here as CSS custom properties for runtime use.
   ================================================================
   Naming convention:
   - Short names (--navy-900, --gold-500) for theme code clarity.
   - WordPress also auto-generates --wp--preset--* variables from
     theme.json — both work, both reference the same color values.
   ================================================================ */

/* Self-hosted variable fonts. Drop the .woff2 files into /assets/fonts/
   per the README in that folder. font-display:swap prevents FOIT. */
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/Newsreader-Variable.woff2") format("woff2-variations"),
		 url("../fonts/Newsreader-Variable.woff2") format("woff2");
}
@font-face {
	font-family: "Newsreader";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations"),
		 url("../fonts/Newsreader-Italic-Variable.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
		 url("../fonts/Inter-Variable.woff2") format("woff2");
}

:root {
	/* === Color === */
	--navy-900: #0E1A2B; --navy-800: #152339; --navy-700: #1F3553;
	--navy-300: #5C7AA0; --navy-100: #E8EEF5; --navy-50:  #F4F7FB;

	--gold-600: #A87714; --gold-500: #C8941A; --gold-300: #E5BD5C;
	--gold-100: #FBEDC9; --gold-50:  #FDF6E5;

	--cta-700:  #9F2622; --cta-600:  #C8312D; --cta-100:  #FCEBEA;

	--ink-900:  #1A1A1A; --ink-700:  #4A4A4A;
	--ink-500:  #7A7A7A; --ink-300:  #C9C9C9;

	--canvas:   #FAF7F2; --surface:  #FFFFFF; --raised:   #FBF9F4;

	--success:    #2D7A48;
	--success-50: #E8F4ED;
	--warning:    #B8862D;
	--error:      #B8312D;
	--star:       #E5A526;

	/* === Typography === */
	--font-display: "Newsreader", "Newsreader-fallback", Georgia, "Times New Roman", serif;
	--font-body:    "Inter", "Inter-fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

	--fs-xs:   0.778rem;
	--fs-sm:   0.889rem;
	--fs-base: 1rem;
	--fs-lg:   1.25rem;
	--fs-xl:   1.563rem;
	--fs-2xl:  1.953rem;
	--fs-3xl:  2.441rem;
	--fs-4xl:  3.052rem;
	--fs-5xl:  3.815rem;

	--lh-tight:   1.1;
	--lh-snug:    1.25;
	--lh-normal:  1.4;
	--lh-relaxed: 1.6;
	--lh-loose:   1.75;

	--ls-tight:   -0.02em;
	--ls-wide:    0.04em;
	--ls-widest:  0.12em;

	/* Body sizes scale on smaller screens — readability for the 50-70 audience. */
	--body-fs: 1.125rem; /* 18px desktop body */

	/* === Spacing (4px base, 8pt rhythm) === */
	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  3rem;
	--s-8:  4rem;
	--s-9:  6rem;
	--s-10: 8rem;

	/* === Radius === */
	--r-sm:   4px;
	--r-md:   8px;
	--r-lg:   12px;
	--r-xl:   20px;
	--r-pill: 999px;

	/* === Shadow (navy-tinted for warmth) === */
	--shadow-sm: 0 1px 2px rgba(14,26,43,0.06);
	--shadow-md: 0 4px 12px rgba(14,26,43,0.08);
	--shadow-lg: 0 12px 32px rgba(14,26,43,0.12);
	--shadow-xl: 0 24px 64px rgba(14,26,43,0.16);

	/* === Motion === */
	--t-fast:    150ms;
	--t-default: 200ms;
	--t-slow:    300ms;
	--ease-out:  cubic-bezier(0, 0, 0.2, 1);

	/* === Container === */
	--container:      1200px;
	--container-wide: 1360px;
	--container-text: 720px;

	/* === Tap target (50-70 audience minimum) === */
	--tap-min: 44px;

	/* === z-index scale === */
	--z-base:     1;
	--z-dropdown: 100;
	--z-sticky:   200;
	--z-modal:    1000;
	--z-toast:    1100;
	--z-tooltip:  1200;
}

@media (max-width: 640px) {
	:root {
		--body-fs:  1.0625rem;  /* 17px mobile body */
		--fs-5xl:   2.625rem;
		--fs-4xl:   2.25rem;
		--fs-3xl:   1.875rem;
		--fs-2xl:   1.5rem;
	}
}

/* Honor user preference for reduced motion sitewide. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast:    1ms;
		--t-default: 1ms;
		--t-slow:    1ms;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === Metric-matched fallback fonts (fix7m) ============================
   Prevents the visible "jump" when Newsreader / Inter finish loading and
   swap in over the system fallback. Size-adjust + ascent/descent overrides
   make the fallback occupy the SAME vertical space as the real font, so
   when font-display:swap fires there's zero layout shift.

   Values sourced from Capsize / the Web.dev "Optimize Cumulative Layout
   Shift" guidance for the closest available system fallbacks
   (Arial for Inter, Georgia for Newsreader).
   ===================================================================== */
@font-face {
	font-family: 'Inter-fallback';
	src: local('Arial');
	size-adjust: 107.4%;
	ascent-override: 90%;
	descent-override: 22.43%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Newsreader-fallback';
	src: local('Georgia');
	size-adjust: 110%;
	ascent-override: 87%;
	descent-override: 24%;
	line-gap-override: 0%;
}