/*
 * Steen design tokens: fonts, colours, spacing.
 *
 * Every colour and font on the site comes from here. Change a value once
 * and it updates everywhere (front end and block editor).
 *
 * Fonts: Roboto (body, menu, buttons and labels) and Raleway (headings), self-hosted WOFF2 (Latin subset), from Fontsource.
 * Licensed under the SIL Open Font License 1.1, see assets/fonts/OFL-*.txt.
 */

/* ---------- Fonts ---------- */

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/raleway-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
	/* Font families */
	--font-body: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Raleway", "Segoe UI", system-ui, sans-serif;
	--font-nav: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Brand colours (from the logo) */
	--color-primary: #1a3dc2;        /* Steen blue: links, secondary buttons */
	--color-primary-rgb: 26, 61, 194;
	--color-deep: #0b1f5c;           /* headings, hover */
	--color-deep-rgb: 11, 31, 92;
	--color-navy: #0a1638;           /* header, footer, dark sections */
	--color-navy-rgb: 10, 22, 56;
	--color-accent: #d0202e;         /* Steen red: Request a Quote buttons, plus small decorative accents */
	--color-accent-rgb: 208, 32, 46;
	--color-accent-hover: #a8141f;
	--color-accent-light: #ff5a5f;   /* red text on navy */
	--color-primary-light: #7fa0ff;  /* blue text and links on navy */
	--color-primary-light-rgb: 127, 160, 255;
	--color-primary-pale: #b3c6ff;   /* pale blue text over the title band photo (4.7:1 at its lightest) */
	--color-primary-soft: #e8ecf9;   /* tint: icon tiles, pills (Steen blue on it is 7.7:1) */

	/* Neutrals */
	--color-ink: #111827;            /* body text */
	--color-muted: #556070;          /* secondary text */
	--color-nav-text: #3d4b66;       /* main menu words on the white bar: soft grey-navy (8.8:1) */
	--color-surface: #f4f6fb;        /* light section background */
	--color-border: #dce1ec;
	--color-border-soft: #e9edf4;    /* card edges on white */
	--color-line: #c3cad8;           /* thin decorative lines (title underline, step connectors) */
	--color-white: #fff;
	--color-on-dark: rgba(255, 255, 255, 0.88); /* body text on navy */
	--color-on-dark-soft: rgba(255, 255, 255, 0.75); /* footer links on navy (about 11:1) */

	/* Status (provisional, used by form messages in M6) */
	--color-success: #1b7f3b;
	--color-warning: #b45309;
	--color-success-soft: #e8f5ec;   /* "message sent" box */
	--color-success-ink: #0f4d24;    /* text in that box */
	--color-warning-soft: #fdf3e7;   /* "please check" box */
	--color-warning-ink: #6b2d0b;    /* text in that box */

	/* WhatsApp (deep teal-green: 6.0:1 with white text, so buttons with words pass WCAG AA) */
	--color-whatsapp: #0e6f64;
	--color-whatsapp-hover: #0a5a51;

	/* Background decorations (dots, rings, curved lines): soft Steen-blue tints.
	   Red appears only as small accent shapes (a slanted bar, a dot, two short
	   bars), never on text, and never near a Request a Quote button. */
	--decor-accent: var(--color-accent);          /* red accent shapes */
	--decor-dot: rgba(26, 61, 194, 0.2);         /* dot grids on white or grey */
	--decor-line: rgba(26, 61, 194, 0.13);       /* rings and curved lines on white or grey */
	--decor-glow: rgba(26, 61, 194, 0.08);       /* soft round glow */
	--decor-dot-dark: rgba(127, 160, 255, 0.24); /* dot grids on navy */
	--decor-line-dark: rgba(127, 160, 255, 0.2); /* rings and curved lines on navy */

	/* Focus outlines */
	--color-focus: var(--color-primary);
	--color-focus-on-dark: var(--color-primary-light);

	/* Shape and depth */
	--radius: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.25rem;
	--shadow-sm: 0 1px 2px rgba(10, 22, 56, 0.06), 0 1px 3px rgba(10, 22, 56, 0.08);
	--shadow: 0 8px 24px rgba(10, 22, 56, 0.12);
	--shadow-soft: 0 4px 20px rgba(10, 22, 56, 0.06);   /* resting cards */
	--shadow-lg: 0 18px 48px rgba(10, 22, 56, 0.14);    /* hovered cards */
	--shadow-hero-photo: 0 18px 48px rgba(10, 22, 56, 0.22); /* hero photo on its blue panel */

	/* Spacing */
	--space-section: clamp(3rem, 2rem + 4vw, 5.5rem);
	--space-title: 0.75rem;      /* under page, section and panel titles */
	--space-title-sm: 0.5rem;    /* under card and list titles */

	/* Type scale: every heading on the site uses one of these five sizes. */
	--fs-display: clamp(2rem, 1.35rem + 2.2vw, 3rem);     /* page titles and the hero: 48 px to 32 px */
	--fs-section: clamp(1.625rem, 1.2rem + 1.1vw, 2rem);  /* section titles: 32 px to 26 px */
	--fs-panel: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); /* form and panel titles, headings in text: 26 px to 22 px */
	--fs-card: 1.25rem;          /* card titles: 20 px */
	--fs-item: 1.125rem;         /* small list and step titles, side boxes: 18 px */
	--fs-meta: 0.875rem;         /* dates, places, pills: 14 px */
	--lh-display: 1.12;
	--lh-heading: 1.2;

	/* Small capital labels (eyebrows, card categories, field labels): one style. */
	--label-size: 0.8125rem;     /* 13 px */
	--label-tracking: 0.1em;

	/* Readable line length for introductions and paragraphs (about 70 characters). */
	--measure: 42rem;
}