/*
 * DHS Electronics design tokens.
 * Section 1 is copied exactly from docs/DHS-Brand_Guidelines.pdf, page 16.
 * Section 2 holds values the guidelines state on other pages but omit from
 * the page-16 appendix (page cited on each). Section 3 maps colour roles to
 * those values so a dark theme can be added later by remapping roles only.
 * This is the only file in the theme where raw colour, size, spacing,
 * radius or shadow values are typed.
 */

/* 1. Page 16 appendix (verbatim) ---------------------------------------- */
:root {
	--blue-500:#1D6FFF;
	--blue-300:#5B93FF;
	--blue-700:#0F4FD4;
	--lime-500:#C8FF2E;
	--lime-600:#B4E828;
	--lime-700:#A0D218;
	--n-50:#F7F8FA;
	--n-100:#EDEFF3;
	--n-200:#DDE1E8;
	--n-300:#C2C8D4;
	--n-400:#97A0B0;
	--n-500:#6B7484;
	--n-600:#4A515E;
	--n-700:#2E343D;
	--n-900:#0B0E13;
	--surface-dark:#12161D;
	--success:#1FA971;
	--warning:#E08A00;
	--danger:#D92D33;
	--warranty:#0C7A57;
	--star:#FFB020;

	--font-display:'Space Grotesk';
	--font-body:'Inter';
	--h1:56px; --h1-m:34px;
	--h2:44px; --h2-m:28px;
	--h3:32px; --h3-m:24px;
	--h4:24px; --h5:20px;
	--h6:16px;
	--body-lg:18px;
	--body:16px;
	--small:14px;
	--caption:12px;
	--space-1:4px;
	--space-2:8px;
	--space-3:12px;
	--space-4:16px;
	--space-6:24px;
	--space-8:32px;
	--space-12:48px;
	--space-16:64px;
	--space-24:96px;
	--measure:70ch;

	--r-sharp:0;
	--r-badge:2px;
	--r-control:4px;
	--r-card:6px;
	--r-pill:999px;
	--border:1px solid var(--n-200);
	--border-dark:1px solid var(--n-700);
	--shadow-1:0 2px 6px rgb(0 0 0/.35);
	--shadow-2:0 12px 32px rgb(0 0 0/.55);
	--focus:0 0 0 3px rgb(29 111 255/.22);
	--tap-min:44px;
	--dur-fast:120ms;
	--dur-base:200ms;
	--dur-slow:300ms;
	--ease:cubic-bezier(.2,0,0,1);
	--container:1200px;
	--gutter:24px;
	--gutter-m:16px;
}

/* 2. Stated elsewhere in the guidelines, missing from page 16 ------------ */
:root {
	/* p.6-7: white mark and primary text on Carbon */
	--white:#FFFFFF;

	/* p.8: badge text-on-tint pairings */
	--cod-text:#0F4FD4;      --cod-tint:#E8F0FF;
	--warranty-tint:#E3F7EE;
	--warning-text:#7A4A00;  --warning-tint:#FDF1DC;
	--danger-text:#8E1216;   --danger-tint:#FCE8E9;
	--danger-dark:#FF6B6F;   /* p.8: danger on dark grounds */
	--success-dark:#3DDC97;  /* p.8: success on dark grounds */
	--success-text:#0C5F42;

	/* p.10: mobile steps of the type scale */
	--h4-m:20px; --h5-m:18px; --h6-m:15px;
	--body-lg-m:17px; --body-m:15px; --small-m:13px;

	/* p.10: leading and tracking */
	--lh-h1:1.05; --lh-h2:1.1; --lh-h3:1.15; --lh-h4:1.25; --lh-h5:1.3; --lh-h6:1.4;
	--lh-body:1.6; --lh-small:1.5; --lh-caption:1.4;
	--tr-h1:-0.03em; --tr-h2:-0.02em; --tr-h3:-0.015em; --tr-h4:-0.01em;
	--tr-h6:0.01em; --tr-small:0.005em; --tr-caption:0.06em;

	/* p.9-10: approved weights */
	--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

	/* p.11: tablet gutter and page margins */
	--gutter-t:20px;
	--margin-m:var(--space-4);
	--margin-t:var(--space-8);
	--margin-d:var(--space-12);

	/* p.11: 1px is the only border weight */
	--hairline:1px;

	/* p.11 / p.14: accent rule and focus outline weight; the lime button's
	   focus outline sits outside it by the same 2px */
	--rule-accent:2px;
	--focus-offset:2px;

	/* p.5: header lockup height (>= 120px wide at this height) */
	--logo-h:24px;

	/* Fallback stacks for the two approved faces */
	--stack-display:var(--font-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--stack-body:var(--font-body), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* 3. Colour roles (light theme, v1) -------------------------------------- */
:root {
	--color-ground:var(--n-50);
	--color-surface:var(--white);
	--color-fill:var(--n-100);
	--color-text:var(--n-900);
	--color-text-muted:var(--n-600);
	--color-icon:var(--n-500);
	--color-border:var(--n-200);
	--color-border-input:var(--n-300);
	--color-link:var(--blue-700);      /* #1D6FFF on n-50 is 4.15:1, under AA for body text */
	--color-brand:var(--blue-500);
	--color-focus:var(--blue-500);

	--color-dark-ground:var(--n-900);
	--color-dark-surface:var(--surface-dark);
	--color-dark-text:var(--white);
	--color-dark-text-muted:var(--n-400);
	--color-dark-border:var(--n-700);
	--color-dark-link:var(--blue-300);

	--color-cta:var(--lime-500);
	--color-cta-hover:var(--lime-600);
	--color-cta-active:var(--lime-700);
	--color-cta-text:var(--n-900);
}