/* Career Voyage — design tokens (the "Glimmer" system).
   Ported 1:1 from the supplied design system's tokens/*.css. Custom properties, not
   theme.json presets, so every value here matches the spec and guideline files exactly
   and the whole system can be audited against them. theme.json separately mirrors the
   palette, font sizes and spacing scale so the block editor's pickers stay in step. */
:root {
	/* CONFIRMED PALETTE — client's brand sheet, 14 September 2026. Do not round or re-derive. */
	--navy: #0D1B2A; /* trust, professionalism, depth */
	--silver: #C0C5CC; /* clarity, experience, authority — 10.0:1 on navy */
	--turquoise: #18B5C6; /* insight, possibility, movement — 6.94:1 on navy */

	/* Derived: tints, shades, light surfaces the brand sheet does not name. */
	--navy-mid: #14304A;
	--silver-mid: #8B939E; /* 5.6:1 on navy */
	--silver-light: #E4E8ED;
	--paper: #F4F7FA;
	--ink: #16263A;

	/* Accent ladder. Brand turquoise scores 2.27:1 on paper — never text on a light surface. */
	--teal-bright: #18B5C6; /* = --turquoise. 6.94:1 on navy */
	--teal-deep: #0E6E7A; /* 5.47:1 on paper — links, buttons, accent text on light */
	--teal-mid: #0F7583; /* 5.18:1 on paper — rules, icons, secondary accent on light */
	--turquoise-dark: var(--teal-deep);

	/* Interaction shades. */
	--turquoise-hover: #3DC4D3;
	--turquoise-press: #1496A5;
	--turquoise-dark-hover: #0B5964;
	--teal-deep-hover: #0B5964;
	--teal-bright-hover: #3DC4D3;
	--teal-bright-press: #1496A5;
	--navy-hover: #132741;

	/* Silver as light, not fill. */
	--silver-20: rgba(192, 197, 204, .20);
	--silver-40: rgba(192, 197, 204, .40);
	--silver-08: rgba(192, 197, 204, .08);
	--navy-overlay: rgba(13, 27, 42, .72);

	/* The glimmer. Display headings over navy only, 24px and up, never body copy. */
	--glimmer: linear-gradient(100deg, #8B939E 0%, #E4E8ED 45%, #8B939E 100%);
	--glimmer-fallback: var(--silver);
	--glimmer-edge: linear-gradient(100deg, rgba(139, 147, 158, 0) 0%, rgba(228, 232, 237, .55) 45%, rgba(139, 147, 158, 0) 100%);

	/* Type. */
	--font-heading: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif;
	--font-body: "Carlito", "Calibri", system-ui, sans-serif;
	--weight-regular: 400;
	--weight-semibold: 600;
	--weight-bold: 700;
	--text-display-xl: clamp(38px, 5.4vw, 66px);
	--text-display: clamp(32px, 3.9vw, 48px);
	--text-h1: clamp(27px, 2.7vw, 34px);
	--text-h2: clamp(21px, 1.9vw, 24px);
	--text-h3: 18px;
	--text-md: 18px;
	--text-body: 17px;
	--text-small: 14px;
	--text-quote: clamp(24px, 2.7vw, 34px);
	--lh-display: 1.2;
	--lh-heading: 1.2;
	--lh-body: 1.6;
	--lh-small: 1.5;
	--tracking-display: -0.01em;
	--tracking-normal: 0;
	--tracking-eyebrow: 0.14em;
	--measure: 62ch;

	/* Space, shape, depth. */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
	--space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px; --space-10: 96px; --space-11: 128px;
	--section-y: 96px;
	--section-y-mobile: 64px;
	--gutter: 24px;
	--page-max: 1200px;
	--prose-max: 720px;
	--tap-min: 44px;
	--bp-xl: 1280px; --bp-lg: 1024px; --bp-md: 768px; --bp-sm: 480px;

	--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
	--border-hairline: 1px; --border-focus: 3px;

	--shadow-1: 0 1px 2px rgba(10, 31, 60, .10);
	--shadow-2: 0 8px 24px -10px rgba(10, 31, 60, .35);
	--shadow-3: 0 22px 56px -18px rgba(10, 31, 60, .45);
	--edge-sheen: inset 0 1px 0 rgba(232, 239, 245, .14);
	--ring-focus: 0 0 0 3px rgba(46, 196, 198, .55);
	--ring-focus-light: 0 0 0 3px rgba(15, 111, 118, .45);

	--dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms;
	--ease-voyage: cubic-bezier(.22, .61, .36, 1);
	--ease-in-out: cubic-bezier(.4, 0, .2, 1);
	--ease-exit: cubic-bezier(.4, 0, 1, 1);

	/* Semantic layer. Default context is LIGHT — navy is the punctuation band, not the page. */
	--surface-page: var(--paper);
	--surface-card: #ffffff;
	--surface-band: var(--navy);
	--surface-band-alt: var(--navy-mid);
	--surface-light: var(--paper);
	--surface-light-card: #ffffff;

	--text-heading: var(--navy);
	--text-body-on-paper: var(--ink);
	--text-muted-on-paper: #4B5C70;
	--text-on-paper: var(--ink);
	--text-heading-on-paper: var(--navy);
	--text-accent-on-paper: var(--teal-deep);

	--text-heading-on-navy: var(--silver-light);
	--text-body-on-navy: var(--silver);
	--text-muted-on-navy: var(--silver-mid);
	--text-accent-on-navy: var(--teal-bright);
	--text-on-accent: var(--navy);

	--rule-on-navy: var(--silver-20);
	--rule-strong-on-navy: var(--silver-40);
	--rule-on-paper: #D6DFE8;

	--action-primary: var(--teal-bright);
	--action-primary-text: var(--navy);
	--action-primary-light: var(--teal-deep);
	--action-primary-light-text: var(--paper);

	--link-on-navy: var(--teal-bright);
	--link-on-paper: var(--teal-deep);
	--link: var(--teal-deep);

	--highlight-on-paper: var(--teal-deep);
	--highlight-on-paper-text: var(--paper);
	--highlight-on-navy: var(--teal-bright);
	--highlight-on-navy-text: var(--navy);
	--accent-script: var(--teal-bright);
}