/*
 * Design tokens - the single source of truth for the brand design system.
 *
 * Nothing in this file produces output; it only declares custom properties.
 * Everything else in the theme - global.css, template parts and every ACF block
 * stylesheet - consumes these names and must never hardcode a hex value, font
 * family or type size.
 *
 * Naming:
 *   --color-*  brand palette (raw) and semantic roles
 *   --font-*   families
 *   --fs-*     font sizes      --fw-* weights      --lh-* line heights
 *   --tp-*     theme layout scales (spacing, radii, shadows, container)
 *
 * Responsive typography lives at the bottom: the --fs-* values are redefined
 * per breakpoint, so every consumer scales down automatically without writing
 * a single media query of its own.
 */

:root {

	/* ---------------------------------------------------------------------
	   Brand palette
	   Raw values from the brand guidelines. Prefer a semantic role below
	   over reaching for these directly.
	   --------------------------------------------------------------------- */

	--color-primary: #032742;
	--color-blue: #2d7fc1;
	--color-light: #f7f7f7;
	--color-gray: #bebebe;
	--color-slate: #4c5c63;
	--color-black: #000000;
	--color-white: #ffffff;

	/*
	 * Tints derived from --color-blue, for the light blue section treatment
	 * behind the header and its faint vertical rules.
	 */
	--color-tint: #e8f3fc;
	--color-tint-line: #d7e9f8;
	--color-watermark: #f0f5fb;   /* decorative footer wordmark */

	/* ---------------------------------------------------------------------
	   Semantic roles
	   What the colour is *for*. These are the names templates and blocks
	   should use, so a palette change stays a one-line edit above.
	   --------------------------------------------------------------------- */

	/* Surfaces */
	--color-bg: var(--color-white);
	--color-surface: var(--color-light);

	/* Text */
	--color-text: var(--color-primary);
	--color-text-muted: var(--color-slate);
	--color-heading: var(--color-primary);

	/* Lines + accents */
	--color-border: var(--color-gray);
	--color-border-subtle: #e4e7e9;
	--color-accent: var(--color-blue);
	--color-accent-hover: #24679c;   /* --color-blue, ~12% darker */
	--color-link: var(--color-blue);
	--color-link-hover: var(--color-primary);
	--color-focus: var(--color-blue);

	/* Text that sits on a filled background */
	--color-on-accent: var(--color-white);
	--color-on-primary: var(--color-white);

	/*
	 * Status. The brand has no green, but "active" has to read as good news
	 * at a glance - the account dashboard's plan status pill. Semantic roles
	 * only, like the tints above, so they are not offered as editor swatches.
	 */
	--color-success: #1e7a4c;        /* 4.7:1 on --color-success-tint - AA at body size */
	--color-success-tint: #e3f4ea;

	/* The checkout's own error red (--wc-red in woocommerce.css), for errors
	   reported anywhere else - the account's toasts. */
	--color-danger: #b3261e;         /* 5.7:1 on --color-danger-tint */
	--color-danger-tint: #fdecea;

	/* ---------------------------------------------------------------------
	   Typography
	   --------------------------------------------------------------------- */

	/* Families. Fallbacks are metric-similar to limit swap reflow. */
	--font-heading: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Weights. Instrument Sans ships 400-700, Inter 100-900. */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/*
	 * Size scale - desktop. Brand sizes expressed in rem so they respect the
	 * reader's browser font-size setting (1rem = 16px by default).
	 */
	--fs-h1: 5.625rem;   /* 90px */
	--fs-h2: 3.125rem;   /* 50px */
	--fs-h3: 1.5rem;     /* 24px */
	--fs-p1: 1.25rem;    /* 20px */
	--fs-p2: 1.125rem;   /* 18px */
	--fs-p3: 0.875rem;   /* 14px */

	/* Line heights. Large display type needs a tighter ratio than body copy. */
	--lh-h1: 1.05;
	--lh-h2: 1.1;
	--lh-h3: 1.25;
	--lh-body: 1.6;
	--lh-tight: 1.2;

	/* Letter spacing. Optical correction for the large headings only. */
	--ls-h1: -0.02em;
	--ls-h2: -0.015em;
	--ls-h3: -0.005em;

	/* Measure - readable line length for long-form copy. */
	--measure: 68ch;

	/* ---------------------------------------------------------------------
	   Spacing, radii, elevation, layout
	   Not part of the brand guidelines; theme-level scales, kept namespaced.

	   Bootstrap owns spacing in markup - prefer its p-*, m-* and gap-*
	   utilities there. These exist for use *inside* CSS, where a utility
	   class cannot be applied, and as the source for the --bs-* radius
	   bridge below.
	   --------------------------------------------------------------------- */

	--tp-space-xs: 0.25rem;
	--tp-space-sm: 0.5rem;
	--tp-space-md: 1rem;
	--tp-space-lg: 1.5rem;
	--tp-space-xl: 2.5rem;
	--tp-space-2xl: 4rem;
	--tp-space-3xl: 6rem;

	--tp-radius-sm: 4px;
	--tp-radius-md: 8px;
	--tp-radius-btn: 10px;   /* buttons - rounded rect, per the design */
	--tp-radius-card: 12px;  /* content cards sitting on a section, per the design */
	--tp-radius-lg: 16px;
	--tp-radius-xl: 20px;    /* the floating header card */
	--tp-radius-pill: 999px;

	--tp-shadow-md: 0 8px 24px rgb(3 39 66 / 8%);

	--tp-container-max: 75rem;
	/* Header card + footer columns, incl. gutters. The design (1920px frame)
	   uses a 1440px content width - 75% of the viewport - so the shell tracks
	   that ratio, with a floor for the lg breakpoint and the design width as
	   the ceiling. */
	--tp-shell-max: clamp(63.5rem, calc(75vw + 1.5rem), 91.5rem);
}

/* -------------------------------------------------------------------------
   Responsive typography
   Only the size tokens are redefined. 90px display type cannot survive a
   phone, so each step down is a deliberate value rather than a blanket scale.
   ------------------------------------------------------------------------- */

/* Tablet / small laptop */
@media (max-width: 64rem) { /* 1024px */
	:root {
		--fs-h1: 3.75rem;    /* 60px */
		--fs-h2: 2.375rem;   /* 38px */
		--fs-h3: 1.375rem;   /* 22px */
		--fs-p1: 1.125rem;   /* 18px */
		--fs-p2: 1.0625rem;  /* 17px */
	}
}

/* Mobile */
@media (max-width: 37.5rem) { /* 600px */
	:root {
		--fs-h1: 2.5rem;     /* 40px */
		--fs-h2: 1.875rem;   /* 30px */
		--fs-h3: 1.25rem;    /* 20px */
		--fs-p1: 1.0625rem;  /* 17px */
		--fs-p2: 1rem;       /* 16px */

		--lh-h1: 1.12;
		--lh-h2: 1.18;

		--ls-h1: -0.01em;
		--ls-h2: -0.01em;

		--tp-space-3xl: 3.5rem;
		--tp-space-2xl: 2.5rem;
	}
}

/* =========================================================================
   Bootstrap bridge
   =========================================================================

   Bootstrap 5.3 drives its typography, colours, links, borders and radii from
   `--bs-*` custom properties. Remapping them here is what makes Bootstrap
   render in the brand identity - grid, utilities and components included -
   without overriding a single Bootstrap rule or duplicating one in custom CSS.

   This block must stay after Bootstrap in the cascade; inc/enqueue.php
   guarantees that by making the brand stylesheets depend on the `bootstrap`
   handle.

   Where Bootstrap hardcodes a value instead of reading a variable (the
   `.btn-*` variants and the form focus ring), the override lives in
   global.css - those need a selector, not just a token.
   ------------------------------------------------------------------------- */

:root {

	/* --- Typography ------------------------------------------------------ */
	--bs-font-sans-serif: var(--font-body);
	--bs-body-font-family: var(--font-body);
	--bs-body-font-size: var(--fs-p2);
	--bs-body-font-weight: var(--fw-regular);
	--bs-body-line-height: var(--lh-body);
	--bs-font-monospace: var(--font-mono);

	/* Bootstrap applies this to every h1-h6 via Reboot. */
	--bs-heading-color: var(--color-heading);

	/* --- Body ------------------------------------------------------------ */
	--bs-body-color: var(--color-text);
	--bs-body-color-rgb: 3, 39, 66;
	--bs-body-bg: var(--color-bg);
	--bs-body-bg-rgb: 255, 255, 255;

	--bs-emphasis-color: var(--color-primary);
	--bs-secondary-color: var(--color-text-muted);
	--bs-secondary-bg: var(--color-surface);
	--bs-tertiary-bg: var(--color-light);

	/* --- Theme colours ---------------------------------------------------
	   Mapped onto the brand palette so .text-*, .bg-*, .border-* and .btn-*
	   utilities all come out on brand.

	   Both forms are needed. Bootstrap 5.3 colour utilities read the -rgb
	   pairs, while the plain hex variables are Bootstrap public API: leaving
	   them unmapped would hand Bootstrap blue to any plugin or stylesheet
	   that reads var(--bs-primary).
	   -------------------------------------------------------------------- */
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: 3, 39, 66;

	--bs-secondary: var(--color-slate);
	--bs-secondary-rgb: 76, 92, 99;

	/* Brand accent blue. Bootstrap has no "accent" slot, so it takes info. */
	--bs-info: var(--color-blue);
	--bs-info-rgb: 45, 127, 193;

	--bs-light: var(--color-light);
	--bs-light-rgb: 247, 247, 247;

	--bs-dark: var(--color-black);
	--bs-dark-rgb: 0, 0, 0;

	--bs-white: var(--color-white);
	--bs-white-rgb: 255, 255, 255;

	/* --- Links ----------------------------------------------------------- */
	--bs-link-color: var(--color-link);
	--bs-link-color-rgb: 45, 127, 193;
	--bs-link-hover-color: var(--color-link-hover);
	--bs-link-hover-color-rgb: 3, 39, 66;

	/* --- Borders + radii -------------------------------------------------- */
	--bs-border-color: var(--color-border-subtle);
	--bs-border-color-translucent: var(--color-border-subtle);
	--bs-border-radius: var(--tp-radius-md);
	--bs-border-radius-sm: var(--tp-radius-sm);
	--bs-border-radius-lg: var(--tp-radius-lg);
	--bs-border-radius-xl: var(--tp-radius-xl);
	--bs-border-radius-pill: var(--tp-radius-pill);

	/* --- Focus ring ------------------------------------------------------- */
	--bs-focus-ring-color: rgb(45 127 193 / 25%);
	--bs-focus-ring-width: 3px;
}