/**
 * NSCB design tokens.
 *
 * Colors and fonts are configured in Site Settings → Colors & Typography and
 * output as an inline :root block (inc/design-tokens.php). The values below are
 * only a neutral, readable baseline for settings that are empty: greyscale and
 * the system font, never the brand palette. Everything else is fixed here.
 * Components must use these variables instead of hardcoded values.
 */

:root {
	/* Colors: neutral baseline, overridden by Site Settings. */
	--nscb-color-bg: #121212;
	--nscb-color-bg-secondary: #1A1A1A;
	--nscb-color-surface: #242424;
	--nscb-color-accent: #9E9E9E;
	--nscb-color-accent-secondary: #D6D6D6;
	--nscb-color-text: #F2F2F2;
	--nscb-color-text-secondary: #C4C4C4;
	--nscb-color-border: #3A3A3A;
	--nscb-color-button-bg: #E6E6E6;
	--nscb-color-button-text: #121212;
	/* Highlight: the bold accent for key calls to action, selected states, arrows
	   and small indicators. Always paired with its own text color. */
	--nscb-color-highlight: #E6E6E6;
	--nscb-color-highlight-text: #121212;
	--nscb-highlight-soft: color-mix(in srgb, var(--nscb-color-highlight) 14%, transparent);
	--nscb-highlight-glow: color-mix(in srgb, var(--nscb-color-highlight) 28%, transparent);

	/* Icon chip: the dark well behind an icon that labels content (contact rows,
	   car facts, footer details), lit by the highlight color from the top, with a
	   thin highlight ring and a soft glow beneath. */
	--nscb-icon-chip-bg: radial-gradient(120% 120% at 30% 10%, color-mix(in srgb, var(--nscb-color-highlight) 20%, transparent) 0%, transparent 62%), var(--nscb-color-bg);
	--nscb-icon-chip-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nscb-color-highlight) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--nscb-color-text) 10%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--nscb-color-highlight) 50%, transparent);

	/* Layered surfaces (derived from the configured colors): a card sits on the
	   page, a raised element (chip, tile, icon well) sits on a card. Each carries
	   a faint light edge along its top, like a lit panel. */
	--nscb-surface-card: linear-gradient(180deg, color-mix(in srgb, var(--nscb-color-surface) 72%, var(--nscb-color-bg-secondary)) 0%, var(--nscb-color-bg-secondary) 100%);
	--nscb-surface-raised: color-mix(in srgb, var(--nscb-color-surface) 70%, var(--nscb-color-bg-secondary));
	--nscb-edge: color-mix(in srgb, var(--nscb-color-text) 9%, transparent);
	--nscb-edge-strong: color-mix(in srgb, var(--nscb-color-text) 16%, transparent);
	--nscb-edge-light: inset 0 1px 0 color-mix(in srgb, var(--nscb-color-text) 7%, transparent);
	--nscb-glass: color-mix(in srgb, var(--nscb-color-bg) 62%, transparent);

	/* Overlays for text over photography; derived from the background color. */
	--nscb-overlay-soft: color-mix(in srgb, var(--nscb-color-bg) 40%, transparent);
	--nscb-overlay-strong: color-mix(in srgb, var(--nscb-color-bg) 75%, transparent);
	--nscb-overlay-gradient: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--nscb-color-bg) 85%, transparent) 100%);

	/* Typography: system font baseline; families, base size and heading weight come from Site Settings. */
	--nscb-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nscb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nscb-font-size-base: 1rem;
	--nscb-font-weight-heading: 600;
	--nscb-font-weight-regular: 400;
	--nscb-font-weight-medium: 500;

	--nscb-text-xs: 0.75rem;
	--nscb-text-sm: 0.875rem;
	--nscb-text-md: 1rem;
	--nscb-text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--nscb-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--nscb-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--nscb-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--nscb-text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	--nscb-text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

	--nscb-leading-tight: 1.1;
	--nscb-leading-snug: 1.3;
	--nscb-leading-normal: 1.6;
	--nscb-tracking-tight: -0.02em;
	--nscb-tracking-wide: 0.12em;

	/* Spacing (4px base). */
	--nscb-space-1: 0.25rem;
	--nscb-space-2: 0.5rem;
	--nscb-space-3: 0.75rem;
	--nscb-space-4: 1rem;
	--nscb-space-5: 1.5rem;
	--nscb-space-6: 2rem;
	--nscb-space-7: 3rem;
	--nscb-space-8: 4rem;
	--nscb-space-9: 6rem;
	--nscb-space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
	--nscb-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

	/* Header height (also used as the scroll offset for in-page anchors). */
	--nscb-header-height: 4rem;

	/* Containers. */
	--nscb-container-sm: 40rem;
	--nscb-container-md: 52rem;
	--nscb-container-lg: 72rem;
	--nscb-container-xl: 82.5rem;

	/*
	 * Breakpoints (reference only: custom properties cannot be used in media
	 * queries, so write these values literally, mobile-first with min-width).
	 * sm 36rem (576px) · md 48rem (768px) · lg 64rem (1024px) · xl 80rem (1280px)
	 */
	--nscb-bp-sm: 36rem;
	--nscb-bp-md: 48rem;
	--nscb-bp-lg: 64rem;
	--nscb-bp-xl: 80rem;

	/* Radii. */
	--nscb-radius-sm: 0.375rem;
	--nscb-radius-md: 0.75rem;
	--nscb-radius-lg: 1.25rem;
	--nscb-radius-xl: 2rem;
	--nscb-radius-2xl: 2.5rem;
	--nscb-radius-pill: 999px;

	/* Shadows: soft and dark, no glow. */
	--nscb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--nscb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--nscb-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
	--nscb-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
	--nscb-shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.4), 0 26px 50px -20px rgba(0, 0, 0, 0.85);

	/* Motion. */
	--nscb-duration-fast: 150ms;
	--nscb-duration-base: 300ms;
	--nscb-duration-slow: 600ms;
	--nscb-duration-cinematic: 1000ms;
	--nscb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--nscb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--nscb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* Layering. */
	--nscb-z-base: 1;
	--nscb-z-sticky: 100;
	--nscb-z-header: 200;
	--nscb-z-overlay: 900;
	--nscb-z-modal: 1000;
}

@media (min-width: 64rem) {
	:root {
		--nscb-header-height: 4.75rem;
	}
}