/**
 * Nordplast — base stylesheet.
 *
 * :root below is the finalised design-token set — the single source of
 * truth this project's CSS and Bricks' Theme Styles are both configured
 * from (see BRICKS-GLOBAL-STYLES.md for the Bricks-side configuration
 * that mirrors these exact values).
 *
 * Colour, typography and spacing follow the original Brand Guidelines.
 * Radius/shadow follow that same document (2px buttons, 4px cards, no
 * shadows) rather than the later 12px/soft-shadow spec used in one
 * other build in this project — flagged in the delivery notes.
 */

:root {

	/* ---- Colour ------------------------------------------------------ */
	--color-charcoal:         #1A1D21;
	--color-steel-blue:       #1F5C8C;
	--color-steel-blue-light: #2E76AC;
	--color-off-white:        #FAFAFA;
	--color-cool-gray:        #EEF0F2;
	--color-border:           #DADDE1;
	--color-text:             #24272C;
	--color-text-on-dark:     #F2F3F5;
	--color-text-muted:       #6B7075;
	--color-white:            #FFFFFF;
	--color-success:          #2E7D4F;
	--color-error:            #B3261E;

	/* Aliases used by generic component CSS elsewhere in the theme */
	--color-primary:    var(--color-steel-blue);
	--color-background: var(--color-off-white);

	/* ---- Spacing (8px rhythm) ------------------------------------------ */
	--space-1: 0.5rem;   /* 8px   */
	--space-2: 1rem;     /* 16px  */
	--space-3: 1.5rem;   /* 24px  */
	--space-4: 2rem;     /* 32px  */
	--space-5: 3rem;     /* 48px  */
	--space-6: 4rem;     /* 64px  */
	--space-7: 6rem;     /* 96px  */
	--space-8: 7.5rem;   /* 120px */
	--space-9: 8.75rem;  /* 140px */

	/* ---- Typography ---------------------------------------------------- */
	--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--font-size-h1: 2.375rem;   /* 38px mobile */
	--font-size-h2: 1.75rem;    /* 28px mobile */
	--font-size-h3: 1.3125rem;  /* 21px        */
	--font-size-body: 1.0625rem; /* 17px       */
	--font-size-small: 0.875rem; /* 14px       */
	--font-size-eyebrow: 0.8125rem; /* 13px    */

	--font-weight-heading: 600;
	--font-weight-body: 400;
	--font-weight-medium: 500;

	--line-height-heading: 1.2;
	--line-height-body: 1.6;
	--letter-spacing-eyebrow: 0.08em;

	/* ---- Radius (no single global radius — buttons and cards differ on
	   purpose, per the Brand Guidelines) -------------------------------- */
	--radius-button: 2px;
	--radius-card: 4px;

	/* No shadow tokens defined — the approved system uses borders and
	   colour changes for elevation, not drop shadows, anywhere. */

	/* ---- Motion --------------------------------------------------------- */
	--transition-fast: 200ms ease-out;
	--transition-medium: 400ms ease-out;

	/* ---- Layout ----------------------------------------------------------- */
	--container-max: 1280px;
	--container-narrow: 800px;
}

@media (min-width: 768px) {
	:root {
		--font-size-h1: 3.75rem; /* 60px */
		--font-size-h2: 2.375rem; /* 38px */
	}
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-2);
	font-weight: var(--font-weight-heading);
	line-height: var(--line-height-heading);
	color: var(--color-text);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a {
	color: var(--color-steel-blue);
	text-decoration: none;
}
a:hover {
	color: var(--color-steel-blue-light);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

:focus-visible {
	outline: 3px solid var(--color-steel-blue);
	outline-offset: 2px;
}

/* ---- Foundational layout primitives ----------------------------------
   .container and .section are referenced throughout header.json,
   footer.json, page.json, archive.json, search.json, and home.json —
   defined here since they're used site-wide, not specific to any one
   component or template. */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-3);
}
@media (min-width: 1024px) { .container { padding-inline: var(--space-4); } }

.container--narrow { max-width: var(--container-narrow); }

.section {
	padding-block: var(--space-6);
}
@media (min-width: 1024px) { .section { padding-block: var(--space-8); } }

.section--tight { padding-block: var(--space-5); }
@media (min-width: 1024px) { .section--tight { padding-block: var(--space-7); } }

.section--off-white { background-color: var(--color-off-white); }
.section--cool-gray  { background-color: var(--color-cool-gray); }
.section--charcoal   { background-color: var(--color-charcoal); color: var(--color-text-on-dark); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 { color: var(--color-text-on-dark); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}