/*
 * GPIPL design tokens (Phase 3).
 *
 * 1. Palette: the six approved PROVISIONAL colours. When the GPIPL logo arrives,
 *    change only these six values; every role and tint below is derived from
 *    them with color-mix(), so the whole system follows. Re-run the contrast
 *    check (docs/DESIGN-SYSTEM.md) after changing them.
 * 2. Roles: what components use. Components never reference the palette directly.
 * 3. Dark scope: the same role names re-pointed for dark sections.
 */
@layer tokens {
	:root {
		/* ---------------------------------------------------------- 1. Palette (provisional) */
		--palette-slate: #1c2a33;   /* Stack Slate: text, dark sections */
		--palette-steel: #5b6b75;   /* Instrument Steel: secondary text, control borders */
		--palette-survey: #f2f4f3;  /* Survey White: surfaces, product plates */
		--palette-paper: #ffffff;   /* Paper: page background */
		--palette-green: #1f7a5a;   /* Span Green: actions, links, verified */
		--palette-amber: #d9982e;   /* Alarm Amber: attention/error FILLS only (2.48:1 as text: never) */

		--on-brand: var(--palette-paper); /* text/icons on brand-colour fills (switches to dark for light brand colours) */
		--accent-light: color-mix(in srgb, var(--palette-green) 50%, #ffffff); /* glows and gradient ends */

		/* ---------------------------------------------------------- 2. Roles (light) */
		--color-bg: var(--palette-paper);
		--color-surface: var(--palette-survey);
		--color-text: var(--palette-slate);
		--color-text-muted: var(--palette-steel);
		--color-heading: var(--palette-slate);

		--color-line: color-mix(in srgb, var(--palette-slate) 14%, var(--palette-paper));        /* decorative rules */
		--color-line-strong: color-mix(in srgb, var(--palette-slate) 30%, var(--palette-paper)); /* decorative only (<3:1) */
		--color-control-border: var(--palette-steel);                                          /* inputs: 5.5:1 */

		--color-accent: var(--palette-green);
		--color-accent-strong: color-mix(in srgb, var(--palette-green) 78%, var(--palette-slate));
		--color-accent-tint: color-mix(in srgb, var(--palette-green) 10%, var(--palette-paper));
		--color-on-accent: var(--palette-paper);
		--color-link: var(--color-accent);
		--color-link-hover: var(--color-accent-strong);

		--color-attention: var(--palette-amber);
		--color-attention-strong: color-mix(in srgb, var(--palette-amber) 62%, var(--palette-slate)); /* borders/icons 4.7:1 */
		--color-attention-text: color-mix(in srgb, var(--palette-amber) 45%, var(--palette-slate));   /* on tint 5.6:1 */
		--color-attention-tint: color-mix(in srgb, var(--palette-amber) 16%, var(--palette-paper));

		--color-focus: var(--palette-green);
		--color-selection: color-mix(in srgb, var(--palette-green) 22%, var(--palette-paper));
		--color-band-line: var(--palette-green);

		/* Primary button (flips on dark: see dark scope) */
		--button-primary-bg: var(--color-accent);
		--button-primary-bg-hover: var(--color-accent-strong);
		--button-primary-text: var(--color-on-accent);

		/* ---------------------------------------------------------- Typography */
		--font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

		/* Fluid scale: 360px -> 1440px viewport. Step 0 = body. */
		--step--2: clamp(0.75rem, 0.74rem + 0.0444vw, 0.78rem);
		--step--1: clamp(0.875rem, 0.8667rem + 0.037vw, 0.9rem);
		--step-0: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
		--step-1: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
		--step-2: clamp(1.3rem, 1.2125rem + 0.3889vw, 1.5625rem);
		--step-3: clamp(1.55rem, 1.4rem + 0.6667vw, 2rem);
		--step-4: clamp(1.85rem, 1.5917rem + 1.1481vw, 2.625rem);
		--step-5: clamp(2.15rem, 1.7417rem + 1.8148vw, 3.375rem);
		--step-6: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem);

		/* Width axis: the typographic signature. Semi-expanded headings, normal body,
		   narrower width for model numbers and dense data. */
		--wdth-display: 116%;
		--wdth-heading: 112%;
		--wdth-ui: 104%;
		--wdth-body: 100%;
		--wdth-data: 88%;

		--wght-body: 400;
		--wght-medium: 500;
		--wght-semibold: 600;
		--wght-bold: 700;
		--wght-display: 560; /* large sizes read better slightly lighter */

		--lh-display: 1.06;
		--lh-heading: 1.16;
		--lh-snug: 1.35;
		--lh-body: 1.6;

		--tracking-display: -0.022em;
		--tracking-heading: -0.012em;
		--tracking-small: 0.008em;

		--measure: 66ch;       /* body text line length */
		--measure-narrow: 48ch;

		/* ---------------------------------------------------------- Space (4px base) */
		--space-3xs: 0.25rem;
		--space-2xs: 0.5rem;
		--space-xs: 0.75rem;
		--space-s: 1rem;
		--space-m: 1.5rem;
		--space-l: 2rem;
		--space-xl: 3rem;
		--space-2xl: 4rem;
		--space-3xl: 6rem;
		--section-pad: clamp(3.5rem, 2.1667rem + 5.9259vw, 7.5rem);
		--section-pad-tight: calc(var(--section-pad) * 0.6);

		/* ---------------------------------------------------------- Layout */
		--container: 76rem;      /* 1216px */
		--container-wide: 90rem; /* 1440px */
		--container-text: 46rem;
		--gutter: clamp(1.25rem, 0.6667rem + 2.5926vw, 3rem);
		--grid-gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
		--grid-min: 17rem;       /* auto-fill card grids */

		/* Breakpoints (reference only; media queries cannot read custom properties):
		   sm 30em (480) | md 48em (768) | lg 64em (1024) | xl 80em (1280) | 2xl 90em (1440) */

		/* ---------------------------------------------------------- Shape */
		--radius-s: 2px;  /* controls, badges */
		--radius-m: 4px;  /* cards, media plates */
		--border: 1px solid var(--color-line);
		--tap: 44px;      /* minimum touch target */
		--focus-ring: 2px solid var(--color-focus);
		--focus-offset: 3px;

		/* ---------------------------------------------------------- Motion */
		--dur-fast: 140ms;
		--dur-base: 240ms;
		--dur-slow: 480ms;
		--dur-draw: 1100ms;
		--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
		--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
		--stagger: 45ms;

		/* ---------------------------------------------------------- Layers */
		--z-raised: 10;
		--z-header: 100;
		--z-overlay: 200;
		--z-skip: 1000;

		/* ---------------------------------------------------------- Icons */
		--icon-stroke: 1.75;
	}

	/* ---------------------------------------------------------- 3. Dark scope
	   Any element with .is-dark (or .section--dark) re-points the roles, so every
	   component inside adapts without dark-specific component CSS. */
	.is-dark,
	.section--dark,
	.cta-inline,
	.contact__details {
		--color-bg: var(--palette-slate);
		--color-surface: color-mix(in srgb, var(--palette-paper) 7%, var(--palette-slate));
		--color-text: var(--palette-paper);
		--color-text-muted: color-mix(in srgb, var(--palette-paper) 74%, var(--palette-slate)); /* 8.7:1 */
		--color-heading: var(--palette-paper);

		--color-line: color-mix(in srgb, var(--palette-paper) 18%, var(--palette-slate));
		--color-line-strong: color-mix(in srgb, var(--palette-paper) 34%, var(--palette-slate));
		--color-control-border: color-mix(in srgb, var(--palette-paper) 55%, var(--palette-slate));

		--color-accent: color-mix(in srgb, var(--palette-green) 45%, var(--palette-paper)); /* 7.6:1 on slate */
		--color-accent-strong: color-mix(in srgb, var(--palette-green) 25%, var(--palette-paper));
		--color-accent-tint: color-mix(in srgb, var(--palette-green) 22%, var(--palette-slate));
		--color-on-accent: var(--palette-slate);
		--color-link: var(--color-accent);
		--color-link-hover: var(--palette-paper);

		--color-focus: var(--color-accent);
		--color-selection: color-mix(in srgb, var(--palette-green) 45%, var(--palette-slate));
		--color-band-line: var(--color-accent);

		/* Composite tokens resolve where they are declared, so they must be re-declared here
		   to pick up the dark line and focus colours (otherwise: light borders, 2.8:1 focus ring). */
		--border: 1px solid var(--color-line);
		--focus-ring: 2px solid var(--color-focus);

		/* Green fill has only 2.8:1 edge contrast on slate, so the button flips to the light green. */
		--button-primary-bg: var(--color-accent);
		--button-primary-bg-hover: var(--palette-paper);
		--button-primary-text: var(--palette-slate);

		color: var(--color-text);
		background-color: var(--color-bg);
		color-scheme: dark;
	}
}