/**
 * CSS: design tokens -- loaded first on every page (site, forms, client pages)
 *
 * Two layers. --palette-* are raw colours and are only referenced inside this
 * file; everything else is named for the job it does, so restyling one job
 * (say, document headings) is a one-line change that touches nothing else.
 *
 * lou-letter.css can't use these: mPDF renders any var() colour as black, so
 * the letter keeps literal values, each commented with the token it mirrors.
 *
 * Fonts are self-hosted (public/fonts/, from Fontsource, SIL OFL): no request
 * to Google, which matters most on the client pages. The browser fetches each
 * file only when the page uses a character in its unicode-range.
 */

/* Latin and Latin Extended ranges, as Fontsource splits them */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-latin-wght-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('/fonts/plus-jakarta-sans-latin-wght-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/anton-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---- Palette (internal: reference via the role tokens below) ---- */
	--palette-black: #000000;
	--palette-white: #ffffff;
	--palette-yellow: #ffc700;
	--palette-yellow-tint: #fffbea;
	--palette-ink: #1a1a1a;
	--palette-grey-700: #5a5a5a;
	--palette-grey-600: #6b6b6b;
	--palette-grey-400: #9e9e9e;
	--palette-grey-300: #bdbdbd;
	--palette-grey-200: #e0e0e0;
	--palette-grey-100: #f4f4f4;
	--palette-navy: #1f3a5f;
	--palette-navy-tint: #e8eef5;
	--palette-gold: #aa9355;
	--palette-green: #1e5e34;
	--palette-green-light: #277843;
	--palette-green-tint: #e6f4ea;
	--palette-amber: #8a6116;
	--palette-amber-tint: #fdf3e2;
	--palette-red: #b71c1c;
	--palette-red-tint: #fdf3f2;

	/* ---- Brand ---- */
	--brand-black: var(--palette-black);
	--brand-yellow: var(--palette-yellow);
	--brand-white: var(--palette-white);

	/* ---- Text ---- */
	--text: var(--palette-ink);
	--text-muted: var(--palette-grey-700);
	--text-subtle: var(--palette-grey-600);
	--text-on-dark: rgba(255, 255, 255, 0.9);
	--text-on-dark-muted: rgba(255, 255, 255, 0.7);
	--text-on-dark-subtle: rgba(255, 255, 255, 0.55);

	/* ---- Surfaces ---- */
	--surface: var(--palette-white);
	--surface-alt: var(--palette-grey-100);
	--surface-dark: var(--palette-black);
	--surface-selected: var(--palette-yellow-tint);

	/* ---- Borders ---- */
	--border: var(--palette-grey-200);
	--border-strong: var(--palette-grey-300);
	--border-hover: var(--palette-grey-400);
	--border-on-dark: rgba(255, 255, 255, 0.25);
	--border-on-dark-subtle: rgba(255, 255, 255, 0.12);
	--border-on-dark-strong: rgba(255, 255, 255, 0.55);

	/* ---- Focus ---- */
	--focus-ring: var(--palette-yellow);

	/* ---- Status: messages, banners, form errors, status pills ---- */
	--success: var(--palette-green);
	--success-bg: var(--palette-green-tint);
	--info: var(--palette-navy);
	--info-bg: var(--palette-navy-tint);
	--warning: var(--palette-amber);
	--warning-bg: var(--palette-amber-tint);
	--error: var(--palette-red);
	--error-bg: var(--palette-red-tint);

	/* ---- Documents: LoU, Terms, solicitor page (client.css) ---- */
	--doc-heading: var(--palette-navy);
	--doc-subheading: var(--palette-navy);
	--doc-link: var(--palette-navy);
	--doc-accordion-title: var(--palette-navy);
	--doc-step-bg: var(--palette-navy);
	--doc-step-text: var(--palette-white);
	--doc-secondary-action: var(--palette-navy);
	--doc-secondary-action-text: var(--palette-white);
	--doc-accept: var(--palette-green);
	--doc-accept-hover: var(--palette-green-light);
	--doc-accept-text: var(--palette-white);
	--doc-table-head-bg: var(--palette-navy);
	--doc-table-head-text: var(--palette-white);
	--doc-total-bg: var(--palette-navy-tint);
	--doc-total-rule: var(--palette-navy);
	--doc-letterhead-rule: var(--palette-gold);
	--doc-quote-rule: var(--palette-gold);
	--doc-quote-bg: var(--palette-grey-100);

	/* ---- Type ---- */
	--font-body: 'Inter', system-ui, sans-serif;
	--font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-display: 'Anton', Impact, sans-serif;

	/* ---- Type sizes: fixed steps, then fluid sizes named by job ---- */
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-base: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 34px;
	--font-size-h1: clamp(30px, 4.4vw, 50px);
	--font-size-h2: clamp(var(--font-size-2xl), 3vw, var(--font-size-3xl));
	--font-size-hero: clamp(var(--font-size-3xl), 7vw, 50px);
	--font-size-display: clamp(44px, 4.4vw, 62px);
	--font-size-display-sm: clamp(var(--font-size-3xl), 3.7vw, 50px);

	/* ---- Font weights ---- */
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* ---- Letter spacing ---- */
	--letter-spacing-heading: -0.03em;
	--letter-spacing-label: 0.06em;
	--letter-spacing-eyebrow: 0.06em;

	/* ---- Line heights ---- */
	--line-height-none: 1;
	--line-height-hero: 1.05;
	--line-height-heading: 1.15;
	--line-height-subheading: 1.3;
	--line-height-tight: 1.45;
	--line-height-default: 1.6;

	/* ---- Spacing: 4px steps up to 24px, then wider ---- */
	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-7: 32px;
	--spacing-8: 40px;
	--spacing-9: 48px;
	--spacing-10: 64px;

	/* ---- Shape, depth, motion ---- */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--shadow-raised: 0 5px 14px rgba(0, 0, 0, 0.18);
	--shadow-pressed: 0 2px 6px rgba(0, 0, 0, 0.15);
	--transition: 0.15s ease-out;

	/* ---- Layout ----
	   Breakpoints can't be variables (var() doesn't work in @media), so
	   every media query uses one of these max-widths:
	   360 narrow phone · 480 small phone · 640 phone · 800 tablet portrait
	   · 960 tablet landscape / small laptop · 1150 nav collapses to the menu
	   button (set by the width of the nav links) */
	--layout-max: 1200px;
	--layout-doc-max: 720px;
	--layout-section-gap: clamp(48px, 7vw, 96px);
	--layout-header-h: 126px;
}