/* ==========================================================================
   Aviva — design tokens
   Every value in the theme comes from this file. No rogue hex, no magic px.
   Brand colours are locked (see /brand/colors.md); everything else is derived.
   ========================================================================== */

@font-face {
	font-family: "Sora";
	src: url("../fonts/sora-var-latin.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var-latin.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* metric-matched to the Arial fallback so the swap costs no layout shift */
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

:root {
	/* ---------- Brand (locked — measured off the live Aviva logo) ---------- */
	--brand-purple: #7356a8;  /* "Name of Purity" tagline + molecule base */
	--brand-teal: #2ec4b6;    /* molecule top arms — 2.2:1 on white: glow only */
	--brand-deep: #5b3d96;    /* the action purple, derived — 8.2:1 on white */
	--brand-action: #5b3d96;

	/* ---------- Neutrals — lavender-tinted, never flat grey --------------- */
	--bg: #ffffff;
	--surface: #f7f5fb;
	--surface-2: #efebf6;
	--border: #e4dfee;
	--border-strong: #cbc3db;
	--text: #17131f;          /* 18.3:1 on --bg */
	--text-muted: #514a5e;    /* 8.4:1 on --bg */
	--text-subtle: #655d73;   /* 6.2:1 on --bg, 5.3:1 on --surface-2 */

	/* ---------- Ink: the dark surface family (hero, footer, bands) ------- */
	--ink: #181127;
	--ink-2: #211836;
	--ink-3: #2c2145;
	--ink-line: rgb(255 255 255 / 0.12);
	--on-ink: #efeaf7;        /* 15.5:1 on --ink */
	--on-ink-muted: #b7aecb;  /*  8.7:1 on --ink */

	/* ---------- Accent roles ---------------------------------------------
	   Purple carries every action; teal is the molecule's light and only
	   ever glows (2.2:1 on white). On ink, teal becomes the readable lift.
	   -------------------------------------------------------------------- */
	--accent: var(--brand-teal);
	--accent-ink: #5b3d96;     /* button fill — white on it is 8.2:1 */
	--accent-ink-hover: #4a2f80;
	--accent-text: #5b3d96;    /* 8.2:1 on white, 7.1:1 on --accent-soft */
	--accent-text-hover: #4a2f80;
	--accent-lift: #4fd8c9;    /* 10.5:1 on --ink — teal on dark surfaces */
	--accent-soft: #f1ecfa;    /* badge / callout tint */
	--accent-soft-strong: #e2d8f3;
	--accent-glow: rgb(46 196 182 / 0.30);
	--teal-text: #0e7c74;      /* teal as text on light — 5.1:1 on white */
	--teal-soft: #e3f7f4;
	--on-accent: #ffffff;
	--white: #ffffff;
	--ink-hover: #2c2145;
	--on-ink-btn-hover: #f4f0fb;

	/* Veils — washes and glows, never text. */
	--veil-accent-xs: rgb(46 196 182 / 0.10);
	--veil-accent-sm: rgb(46 196 182 / 0.16);
	--veil-accent-md: rgb(46 196 182 / 0.30);
	--veil-accent-lg: rgb(46 196 182 / 0.42);
	--veil-brand-sm: rgb(115 86 168 / 0.22);
	--veil-lift: rgb(79 216 201 / 0.50);

	/* Ink scrims for overlays and drawer shadows. */
	--scrim: rgb(24 17 39 / 0.45);
	--scrim-strong: rgb(24 17 39 / 0.62);
	--scrim-shadow: rgb(24 17 39 / 0.22);

	/* Surfaces layered on ink. */
	--on-ink-4: rgb(255 255 255 / 0.04);
	--on-ink-6: rgb(255 255 255 / 0.06);
	--on-ink-8: rgb(255 255 255 / 0.08);
	--on-ink-14: rgb(255 255 255 / 0.14);
	--on-ink-20: rgb(255 255 255 / 0.20);
	--on-ink-28: rgb(255 255 255 / 0.28);
	--frost: rgb(255 255 255 / 0.92);
	--frost-strong: rgb(255 255 255 / 0.94);
	--glass-header: rgb(255 255 255 / 0.86);
	--glass-card: rgb(255 255 255 / 0.05);
	--on-ink-10: rgb(255 255 255 / 0.10);
	--on-ink-16: rgb(255 255 255 / 0.16);
	--on-ink-22: rgb(255 255 255 / 0.22);
	--on-ink-35: rgb(255 255 255 / 0.35);
	--on-ink-45: rgb(255 255 255 / 0.45);
	--on-ink-55: rgb(255 255 255 / 0.55);
	--on-ink-65: rgb(255 255 255 / 0.65);
	--on-ink-90: rgb(255 255 255 / 0.90);

	--shadow-cast-sm: rgb(0 0 0 / 0.35);
	--shadow-cast-md: rgb(0 0 0 / 0.40);
	--shadow-cast-lg: rgb(0 0 0 / 0.45);
	/* The molecule's own gradient: teal arms into the purple core. */
	--gradient-brand: linear-gradient(120deg, #2ec4b6 0%, #5f8fc0 45%, #7356a8 100%);
	--gradient-ink: linear-gradient(160deg, #241a3a 0%, #181127 58%, #120d1e 100%);

	/* ---------- Semantic --------------------------------------------------- */
	--success: #17845a; --success-soft: #e6f5ee;
	--warning: #8a5b00; --warning-soft: #fff4e0;
	--danger:  #c2323b; --danger-soft:  #fdeaec;
	--info:    #1f6f9a; --info-soft:    #e7f2f8;
	--focus:   #6b4bb0;

	/* ---------- Type ------------------------------------------------------- */
	--font-display: "Sora", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", "Segoe UI", Arial, system-ui, sans-serif;

	--step--3: clamp(0.75rem, 0.74rem + 0.05vw, 0.79rem);   /* micro labels, badges — floored at 12px */
	--step--2: clamp(0.79rem, 0.77rem + 0.09vw, 0.85rem);
	--step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
	--step-1:  clamp(1.25rem, 1.16rem + 0.44vw, 1.50rem);
	--step-2:  clamp(1.56rem, 1.41rem + 0.75vw, 2.00rem);
	--step-3:  clamp(1.95rem, 1.71rem + 1.22vw, 2.66rem);
	--step-4:  clamp(2.44rem, 2.05rem + 1.94vw, 3.55rem);
	--step-5:  clamp(3.05rem, 2.45rem + 3.00vw, 4.73rem);

	--lh-tight: 1.05;
	--lh-heading: 1.18;
	--lh-snug: 1.35;
	--lh-body: 1.65;
	--tracking-tight: -0.03em;
	--tracking-heading: -0.02em;
	--tracking-eyebrow: 0.12em;

	/* ---------- Space — 4px base, non-linear ------------------------------- */
	--space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
	--space-s: 16px;   --space-m: 24px;   --space-l: 32px;
	--space-xl: 48px;  --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px;

	/* Section rhythm: one value site-wide, fluid between phone and desktop */
	--section-y: clamp(64px, 4vw + 40px, 112px);
	--section-y-lg: clamp(80px, 6vw + 44px, 144px);
	--section-y-tight: clamp(40px, 3vw + 26px, 72px);

	/* One rhythm for every hero band, so a page never opens taller or shorter
	   than its neighbours. --hero-y-end is the shorter bottom used where a rail
	   or stat row already sits at the base of the band. */
	--hero-y: clamp(64px, 7vw, 120px);
	--hero-y-end: clamp(40px, 4vw, 64px);

	/* ---------- Layout ----------------------------------------------------- */
	--container: 1240px;
	--container-narrow: 880px;
	--measure: 58ch;                 /* ~78 rendered characters in Inter */
	--measure-heading: 22ch;
	--gutter: clamp(20px, 4vw, 48px);
	--header-h: 76px;
	--header-h-compact: 62px;

	/* ---------- Radius / elevation ----------------------------------------- */
	--radius-xs: 2px;
	--radius-s: 6px;
	--radius-m: 10px;
	--radius-l: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	--shadow-s: 0 1px 2px rgb(24 17 39 / 0.05), 0 1px 3px rgb(24 17 39 / 0.07);
	--shadow-m: 0 4px 12px rgb(24 17 39 / 0.07), 0 2px 4px rgb(24 17 39 / 0.05);
	--shadow-l: 0 14px 36px rgb(24 17 39 / 0.11), 0 4px 10px rgb(24 17 39 / 0.06);
	--shadow-accent: 0 10px 26px rgb(91 61 150 / 0.24);

	/* ---------- Borders ----------------------------------------------------- */
	--hairline: 1px solid var(--border);
	--hairline-strong: 1px solid var(--border-strong);
	--hairline-ink: 1px solid var(--ink-line);

	/* ---------- Z-index ----------------------------------------------------- */
	--z-base: 1;
	--z-sticky: 40;
	--z-header: 60;
	--z-drawer: 80;
	--z-modal: 100;
	--z-toast: 120;

	/* ---------- Motion ------------------------------------------------------
	   Durations and easings live here so the motion layer and the CSS
	   micro-interactions can never drift apart.
	   ---------------------------------------------------------------------- */
	--dur-instant: 90ms;
	--dur-fast: 160ms;
	--dur-base: 260ms;
	--dur-slow: 420ms;
	--dur-reveal: 620ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--stagger: 70ms;
	--hero-delay: 120ms;
	--hero-stagger: 90ms;
}

/* A dark band re-points the surface roles instead of overriding 30 rules. */
.on-ink {
	--bg: var(--ink);
	--surface: var(--ink-2);
	--surface-2: var(--ink-3);
	--border: var(--ink-line);
	--border-strong: rgb(255 255 255 / 0.22);
	--text: var(--on-ink);
	--text-muted: var(--on-ink-muted);
	--text-subtle: #8d9ba1;
	--accent-text: var(--accent-lift);
	--accent-text-hover: #55dc9a;
	--accent-soft: rgb(0 179 121 / 0.14);
	--accent-soft-strong: rgb(91 61 150 / 0.24);
	color: var(--text);
	background-color: var(--bg);
}

/* The inverse of .on-ink: a light card sitting inside a dark band needs the
   light token set back, or its badges and links keep the on-dark colours and
   fail contrast against white. */
.on-ink .on-light {
	--bg: #ffffff;
	--surface: #f7f5fb;
	--surface-2: #efebf6;
	--border: #e4dfee;
	--border-strong: #cbc3db;
	--text: #17131f;
	--text-muted: #514a5e;
	--text-subtle: #655d73;
	--accent-text: #5b3d96;
	--accent-text-hover: #4a2f80;
	--accent-soft: #f1ecfa;
	--accent-soft-strong: #e2d8f3;
	color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
		--dur-slow: 1ms; --dur-reveal: 1ms; --stagger: 0ms;
	}
}