/**
 * SciFi2Go - Design tokens as CSS custom properties.
 * Generated from assets/design-tokens.json + docs/BRAND.md §7.
 * Do not hard-code brand values elsewhere; use these variables.
 */

:root {
	/* ---- Brand core ---- */
	--s2g-blue: #2A74FF;
	--s2g-violet: #A744FF;
	--s2g-navy: #050C38;

	/* ---- Blue ramp ---- */
	--s2g-blue-50: #EEF4FF;
	--s2g-blue-100: #D0E0FF;
	--s2g-blue-200: #AAC7FF;
	--s2g-blue-300: #7FACFF;
	--s2g-blue-400: #5590FF;
	--s2g-blue-500: #2A74FF;
	--s2g-blue-600: #2464E1;
	--s2g-blue-700: #1E53BF;
	--s2g-blue-800: #163B92;

	/* ---- Violet ramp ---- */
	--s2g-violet-50: #F8F0FF;
	--s2g-violet-100: #ECD6FF;
	--s2g-violet-200: #DCB4FF;
	--s2g-violet-300: #CA8FFF;
	--s2g-violet-400: #B969FF;
	--s2g-violet-500: #A744FF;
	--s2g-violet-600: #8F3CE1;
	--s2g-violet-700: #7632B9;
	--s2g-violet-800: #582792;

	/* ---- Navy + neutrals ---- */
	--s2g-navy-50: #F0F0F3;
	--s2g-navy-100: #DCDDE3;
	--s2g-navy-200: #C3C5CF;
	--s2g-navy-300: #A0A3B3;
	--s2g-navy-400: #737790;
	--s2g-navy-500: #3C4164;
	--s2g-navy-600: #050C38;
	--s2g-navy-700: #040827;

	/* ---- Semantic ---- */
	--s2g-success: #0F7A4F;
	--s2g-warning: #A85C00;
	--s2g-danger: #B3261E;
	--s2g-info: #1E53BF;
	--s2g-success-bg: #E7F2ED;
	--s2g-warning-bg: #FBF0E5;
	--s2g-danger-bg: #FBEAE9;

	/* ---- Semantic roles (the only values components should use) ---- */
	--s2g-text: var(--s2g-navy-600);          /* 18.81:1 on white  - body copy */
	--s2g-text-secondary: var(--s2g-navy-500); /*  9.85:1 on white */
	--s2g-text-muted: var(--s2g-navy-400);     /*  4.40:1 - large text only */
	--s2g-text-inverse: #FFFFFF;               /* 18.81:1 on navy */
	--s2g-text-inverse-secondary: var(--s2g-navy-200);

	--s2g-link: var(--s2g-blue-700);           /*  6.90:1 on white */
	--s2g-link-hover: var(--s2g-blue-800);     /*  9.32:1 on white */
	--s2g-link-inverse: var(--s2g-blue-300);   /*  8.29:1 on navy */

	--s2g-surface: #FFFFFF;
	--s2g-surface-sunken: #F8F8F9;
	--s2g-surface-inverse: var(--s2g-navy-600);
	--s2g-surface-raised: #FFFFFF;

	--s2g-border: var(--s2g-navy-100);
	--s2g-border-strong: var(--s2g-navy-200);
	--s2g-border-inverse: var(--s2g-navy-500);

	--s2g-accent: var(--s2g-blue-500);         /* large text / UI only on white */
	--s2g-accent-alt: var(--s2g-violet-500);

	/* ---- Buttons ---- */
	--s2g-btn-bg: var(--s2g-blue-600);         /* white text = 5.35:1 */
	--s2g-btn-bg-hover: var(--s2g-blue-700);
	--s2g-btn-text: #FFFFFF;
	--s2g-btn-secondary-bg: transparent;
	--s2g-btn-secondary-text: var(--s2g-blue-700);
	--s2g-btn-secondary-border: var(--s2g-blue-200);

	/* ---- Logo gradient (sampled from brand SVG) ---- */
	--s2g-logo-from: #2F78FA;
	--s2g-logo-to: #A74EF9;

	/* ---- Typography -----------------------------------------------------
	   One scale for the whole site.

	   Sizes are in rem so they respect the reader's browser font size, and
	   the three heading sizes use clamp() with a "rem + vw" preferred value:
	   the rem part keeps them scaling with the user's own font setting, the
	   vw part makes them fluid, and neither is tied to a breakpoint.

	   The two design reference files disagreed with each other about the top
	   of the ramp (article.html reached 52px, hub.html reached 60px). These
	   values follow the larger ramp, which is what the live site already uses.

	   Below h3 the headings stop being a mathematical series and become
	   "the same sizes as body text, but bold and in the display face". That
	   is deliberate: h4/h5/h6 sit inside prose and must not fight the text
	   they label. This is why h5 is body size and h6 is smaller than body.
	   --------------------------------------------------------------------- */
	--s2g-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--s2g-font-display: "Archivo", "Roboto", Arial, sans-serif;
	--s2g-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Text roles: 12 / 13 / 15 / 17 / 19 px */
	--s2g-fs-micro: 0.75rem;   /* 12 - uppercase labels, eyebrows, crumbs */
	--s2g-fs-sm: 0.8125rem;    /* 13 - captions, meta, figure credits */
	--s2g-fs-ui: 0.9375rem;    /* 15 - controls, chips, list items, h6 */
	--s2g-fs-body: 1.0625rem;  /* 17 - prose, h5 */
	--s2g-fs-lede: 1.1875rem;  /* 19 - standfirst, pull quotes, h4 */

	/* Heading ramp: 20-24 / 26-40 / 32-60 px */
	--s2g-fs-h3: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
	--s2g-fs-h2: clamp(1.625rem, 1.333rem + 1.3vw, 2.5rem);
	--s2g-fs-h1: clamp(2rem, 1.417rem + 2.59vw, 3.75rem);

	/* Line heights: unitless, so they follow whatever size is applied. */
	--s2g-lh-display: 1.05;
	--s2g-lh-h: 1.2;
	--s2g-lh-ui: 1.5;
	--s2g-lh-body: 1.65;

	/* Longest comfortable line for prose. */
	--s2g-measure: 68ch;

	/* ---- Spacing ---- */
	/* Spacing: the number is a STEP INDEX, not a pixel value.
	   space-8 is 32px, space-16 is 64px, space-32 is 128px. Reading the
	   suffix as pixels silently multiplies spacing by four. */
	--s2g-space-1: 4px;
	--s2g-space-2: 8px;
	--s2g-space-3: 12px;
	--s2g-space-4: 16px;
	--s2g-space-6: 24px;
	--s2g-space-8: 32px;
	--s2g-space-12: 48px;
	--s2g-space-16: 64px;
	--s2g-space-24: 96px;
	--s2g-space-32: 128px;

	/* ---- Radii ---- */
	--s2g-radius-sm: 2px;
	--s2g-radius: 6px;
	--s2g-radius-lg: 12px;
	--s2g-radius-pill: 999px;

	/* ---- Focus ---- */
	--s2g-focus-ring: var(--s2g-blue-500);
	--s2g-focus-width: 2px;
	--s2g-focus-offset: 2px;

	/* ---- Layout ---- */
	--s2g-content-width: 760px;
	--s2g-wide-width: 1200px;

	/* ---- Motion ---- */
	--s2g-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--s2g-dur: 160ms;
}

@media (prefers-reduced-motion: reduce) {
	:root { --s2g-dur: 0.01ms; }
}