/* ==========================================================================
   BlinkShift — Design tokens
   --------------------------------------------------------------------------
   DARK-DOMINANT, MONOCHROME + COOL LIGHT.

   Three rules govern this palette:

   1. Dark is the default surface. Light sections are relief, not the norm.
   2. The brand stays black and white. Text, buttons and rules are never
      coloured — the wordmark is monochrome and so is the UI.
   3. Hue exists ONLY as light: radial glows, gradient washes across card
      surfaces, focus rings. Never a flat fill, never type. That is what
      separates "modern dark product" from "flat black page".

   Depth comes from stacked near-blacks (--d-0 … --d-4) rather than borders.
   Hairline boxes are deliberately gone; surfaces are told apart by tone.
   ========================================================================== */

:root {
	/* ------------------------------------------------- cool dark ramp ---- */
	/* A trace of blue in the darks stops large black areas reading as dead
	   ink, and gives the glow something to sit against. */
	--d-h: 225;
	--d-s: 18%;

	--d-0: hsl(var(--d-h) var(--d-s) 2.5%);   /* page floor            */
	--d-1: hsl(var(--d-h) var(--d-s) 4.5%);   /* default dark section  */
	--d-2: hsl(var(--d-h) var(--d-s) 7%);     /* raised surface        */
	--d-3: hsl(var(--d-h) var(--d-s) 10.5%);  /* card                  */
	--d-4: hsl(var(--d-h) var(--d-s) 15%);    /* hover / elevated card */
	--d-5: hsl(var(--d-h) calc(var(--d-s) - 4%) 22%);

	/* ---------------------------------------------------- light ramp ---- */
	--l-0: #ffffff;
	--l-1: hsl(var(--d-h) 14% 97.5%);
	--l-2: hsl(var(--d-h) 12% 95%);
	--l-3: hsl(var(--d-h) 10% 91%);
	--l-4: hsl(var(--d-h) 8% 84%);

	/* --------------------------------------------------- neutral text --- */
	--n-0: #ffffff;
	--n-100: hsl(var(--d-h) 12% 92%);
	--n-300: hsl(var(--d-h) 10% 76%);
	--n-400: hsl(var(--d-h) 9% 62%);
	--n-500: hsl(var(--d-h) 8% 48%);
	--n-600: hsl(var(--d-h) 9% 36%);
	--n-700: hsl(var(--d-h) 11% 25%);
	--n-900: hsl(var(--d-h) 16% 9%);
	--n-950: hsl(var(--d-h) 18% 5%);
	--n-999: #000000;

	/* ============================== THE GLOW ============================== */
	/* Hue lives here and nowhere else. */
	--glow-h: 225;
	--glow-s: 100%;
	--glow-l: 66%;
	--glow: hsl(var(--glow-h) var(--glow-s) var(--glow-l));

	--glow-a04: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 0.04);
	--glow-a08: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 0.08);
	--glow-a14: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 0.14);
	--glow-a24: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 0.24);
	--glow-a40: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 0.40);

	/* Translucent white/black overlays. */
	--w-a04: rgb(255 255 255 / 0.04);
	--w-a06: rgb(255 255 255 / 0.06);
	--w-a10: rgb(255 255 255 / 0.10);
	--w-a16: rgb(255 255 255 / 0.16);
	--w-a32: rgb(255 255 255 / 0.32);
	--w-a60: rgb(255 255 255 / 0.60);
	--k-a04: rgb(8 10 15 / 0.04);
	--k-a06: rgb(8 10 15 / 0.06);
	--k-a10: rgb(8 10 15 / 0.10);
	--k-a16: rgb(8 10 15 / 0.16);
	--k-a32: rgb(8 10 15 / 0.32);
	--k-a60: rgb(8 10 15 / 0.60);

	/* ==================== SEMANTIC — dark is the default ================== */
	--c-bg: var(--d-1);
	--c-bg-alt: var(--d-0);
	--c-surface: var(--d-3);
	--c-surface-2: var(--d-2);
	--c-surface-3: var(--d-4);
	--c-ink: var(--n-0);
	--c-ink-soft: var(--n-300);
	--c-muted: var(--n-400);
	--c-line: var(--w-a06);
	--c-line-strong: var(--w-a16);

	--c-accent: var(--n-0);
	--c-accent-hover: var(--n-100);
	--c-accent-ink: var(--d-0);
	--c-accent-quiet: var(--n-0);

	--ac-a06: var(--w-a06);
	--ac-a10: var(--w-a10);
	--ac-a16: var(--w-a16);
	--ac-a32: var(--w-a32);

	--c-focus: var(--glow);

	--c-btn-fill: var(--n-0);
	--c-btn-fill-ink: var(--d-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-0);

	/* Surface gradients — the main tool against flatness. */
	--grad-card: linear-gradient(160deg, var(--d-3) 0%, var(--d-2) 58%, var(--d-1) 100%);
	--grad-card-hover: linear-gradient(160deg, var(--d-4) 0%, var(--d-3) 58%, var(--d-2) 100%);
	--grad-sheen: linear-gradient(180deg, var(--w-a06), transparent 42%);

	/*
	 * Icon-chip hover, expressed as tokens rather than scheme-scoped selectors.
	 * A section carries its variant class and its data-scheme on the SAME
	 * element, so any rule written `[data-scheme='light'] .bs-services--grid`
	 * silently matches nothing — a descendant combinator cannot match self.
	 * Custom properties inherit, so there is no combinator to get wrong.
	 */
	--chip-ink: var(--n-0);
	--chip-plate: linear-gradient(150deg, var(--w-a10), var(--w-a04) 78%);
	--chip-bloom: radial-gradient(115% 115% at 26% 16%, var(--glow-a24) 0%, transparent 62%);
	--chip-ring: inset 0 0 0 1px var(--glow-a24),
	             inset 0 1px 0 var(--w-a32);
	/*
	 * Hover keeps the glyph white and brightens the light behind it instead.
	 * Tinting the glyph itself with glow is what made icons vanish on light
	 * sections — pale blue on a pale blue plate. Light carries the accent now;
	 * the glyph only ever carries contrast.
	 */
	--chip-hover-ink: var(--n-0);
	--chip-hover-plate: linear-gradient(150deg, var(--w-a16), var(--w-a06) 78%);
	/* Watermark numerals in card corners — same inheritance reasoning. */
	--ghost-ink: var(--w-a10);

	/* ============================ TYPOGRAPHY ============================== */
	--font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	 * The whole heading scale, stepped down again — roughly 15% off each ceiling
	 * rather than only the top two, so the levels keep their relationship to one
	 * another instead of h1 collapsing toward h2.
	 *
	 * Every step now reaches its ceiling at a ~1600px viewport and holds there,
	 * so the largest desktops stop inflating type. The floors came down too, but
	 * more gently: small screens were never the problem, and headings still need
	 * to out-weigh body copy at 390px.
	 */
	--fs-display: clamp(2.375rem, 1.3rem + 3.7vw, 5rem);
	--fs-h1: clamp(2rem, 1.3rem + 2.45vw, 3.75rem);
	--fs-h2: clamp(1.625rem, 1rem + 1.875vw, 2.875rem);
	--fs-h3: clamp(1.3125rem, 1.05rem + 0.825vw, 1.875rem);
	--fs-h4: clamp(1.125rem, 1rem + 0.375vw, 1.375rem);
	--fs-h5: clamp(1rem, 0.97rem + 0.14vw, 1.125rem);
	--fs-lead: clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem);
	--fs-body: 1rem;
	--fs-sm: 0.9375rem;
	--fs-xs: 0.8125rem;
	--fs-label: 0.6875rem;
	/* Stat numerals track the headings down. Left at 72px they would have become
	   the loudest thing on the page now that h1 tops out at 60px. */
	--fs-stat: clamp(2.25rem, 1.3rem + 2.2vw, 3.5rem);
	--fs-index: 0.75rem;

	--lh-tight: 0.98;
	--lh-snug: 1.08;
	--lh-heading: 1.18;
	--lh-body: 1.6;
	--lh-loose: 1.7;

	--ls-display: -0.042em;
	--ls-heading: -0.03em;
	--ls-body: -0.011em;
	/* Tracked-out spacing for the few remaining all-caps marks (the wordmark,
	   the skip link). Capitals need the air; lowercase does not. */
	--ls-label: 0.14em;
	/* Eyebrows and meta lines: same family as the headings, set in normal case,
	   so they take heading-ish tracking rather than the wide label tracking. */
	--ls-eyebrow: -0.01em;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* ============================== SPACING =============================== */
	--sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
	--sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
	--sp-9: 2.25rem;  --sp-10: 2.5rem;  --sp-11: 2.75rem; --sp-12: 3rem;
	--sp-14: 3.5rem;  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
	--sp-32: 8rem;

	--section-y: clamp(3.5rem, 5.6vw, 6rem);
	--section-y-lg: clamp(4.5rem, 7.4vw, 8rem);
	--section-y-sm: clamp(2.5rem, 4vw, 4rem);
	--head-gap: clamp(2rem, 3.4vw, 3.5rem);

	/* ============================== LAYOUT ================================ */
	--container: 1240px;
	--container-wide: 1440px;
	--container-narrow: 720px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--header-h: 74px;

	/* =============================== SHAPE ================================ */
	/* Softer than before: shapes should float, not sit in boxes. */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-xl: 30px;
	--r-2xl: 40px;
	--r-pill: 999px;

	--border: 1px solid var(--c-line);
	--border-strong: 1px solid var(--c-line-strong);

	/* Elevation, cool-tinted so shadows belong to the palette. */
	--shadow-sm: 0 1px 2px hsl(var(--d-h) 40% 2% / 0.4);
	--shadow-md: 0 18px 40px -18px hsl(var(--d-h) 45% 2% / 0.75);
	--shadow-lg: 0 40px 80px -30px hsl(var(--d-h) 45% 2% / 0.85);
	--shadow-glow: 0 24px 70px -26px var(--glow-a40);

	/* ============================== MOTION ================================ */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 150ms;
	--dur: 260ms;
	--dur-slow: 560ms;

	--z-base: 1;  --z-sticky: 60;  --z-header: 80;  --z-overlay: 90;  --z-modal: 100;

	color-scheme: dark;
}

/* ==========================================================================
   COLOUR SCHEMES
   ========================================================================== */

[data-scheme='dark'] {
	--c-bg: var(--d-1);
	--c-bg-alt: var(--d-0);
	--c-surface: var(--d-3);
	--c-surface-2: var(--d-2);
	--c-surface-3: var(--d-4);
	--c-ink: var(--n-0);
	--c-ink-soft: var(--n-300);
	--c-muted: var(--n-400);
	--c-line: var(--w-a06);
	--c-line-strong: var(--w-a16);
	--c-accent: var(--n-0);
	--c-accent-hover: var(--n-100);
	--c-accent-ink: var(--d-0);
	--c-accent-quiet: var(--n-0);
	--ac-a06: var(--w-a06);
	--ac-a10: var(--w-a10);
	--ac-a16: var(--w-a16);
	--ac-a32: var(--w-a32);
	--c-focus: var(--glow);
	--c-btn-fill: var(--n-0);
	--c-btn-fill-ink: var(--d-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-0);
	--grad-card: linear-gradient(160deg, var(--d-3) 0%, var(--d-2) 58%, var(--d-1) 100%);
	--grad-card-hover: linear-gradient(160deg, var(--d-4) 0%, var(--d-3) 58%, var(--d-2) 100%);
	--grad-sheen: linear-gradient(180deg, var(--w-a06), transparent 42%);
	background-color: var(--c-bg);
	color: var(--c-ink);
}

/* Deepest surface — used for the page floor and full-bleed statements. */
[data-scheme='void'] {
	--c-bg: var(--d-0);
	--c-bg-alt: var(--d-1);
	--c-surface: var(--d-2);
	--c-surface-2: var(--d-1);
	--c-surface-3: var(--d-3);
	--c-ink: var(--n-0);
	--c-ink-soft: var(--n-300);
	--c-muted: var(--n-400);
	--c-line: var(--w-a06);
	--c-line-strong: var(--w-a16);
	--c-accent: var(--n-0);
	--c-accent-hover: var(--n-100);
	--c-accent-ink: var(--d-0);
	--c-accent-quiet: var(--n-0);
	--ac-a06: var(--w-a04);
	--ac-a10: var(--w-a06);
	--ac-a16: var(--w-a10);
	--ac-a32: var(--w-a32);
	--c-focus: var(--glow);
	--c-btn-fill: var(--n-0);
	--c-btn-fill-ink: var(--d-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-0);
	--grad-card: linear-gradient(160deg, var(--d-2) 0%, var(--d-1) 60%, var(--d-0) 100%);
	--grad-card-hover: linear-gradient(160deg, var(--d-3) 0%, var(--d-2) 60%, var(--d-1) 100%);
	background-color: var(--c-bg);
	color: var(--c-ink);
}

/* Relief sections. Kept genuinely light so they read as a change of gear. */
[data-scheme='light'] {
	--c-bg: var(--l-0);
	--c-bg-alt: var(--l-1);
	--c-surface: var(--l-0);
	--c-surface-2: var(--l-1);
	--c-surface-3: var(--l-2);
	--c-ink: var(--n-950);
	--c-ink-soft: var(--n-600);
	--c-muted: var(--n-500);
	--c-line: var(--k-a06);
	--c-line-strong: var(--k-a16);
	--c-accent: var(--n-950);
	--c-accent-hover: var(--n-900);
	--c-accent-ink: var(--n-0);
	--c-accent-quiet: var(--n-950);
	--ac-a06: var(--k-a04);
	--ac-a10: var(--k-a06);
	--ac-a16: var(--k-a10);
	--ac-a32: var(--k-a32);
	--c-focus: var(--glow);
	--c-btn-fill: var(--n-950);
	--c-btn-fill-ink: var(--n-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-950);
	--grad-card: linear-gradient(160deg, var(--l-0) 0%, var(--l-1) 60%, var(--l-2) 100%);
	--grad-card-hover: linear-gradient(160deg, var(--l-0) 0%, var(--l-0) 60%, var(--l-1) 100%);
	--grad-sheen: linear-gradient(180deg, var(--k-a04), transparent 42%);
	/* On a light section there is no darkness for a bloom to read against, so
	   the chip inverts: an ink glyph on a pale plate, light ring instead of glow. */
	--chip-ink: var(--c-ink);
	--chip-plate: linear-gradient(150deg, var(--k-a06), transparent 78%);
	--chip-bloom: radial-gradient(115% 115% at 26% 16%, var(--k-a04) 0%, transparent 62%);
	--chip-ring: inset 0 0 0 1px var(--k-a10),
	             inset 0 1px 0 var(--w-a60);
	--chip-hover-ink: var(--c-ink);
	--chip-hover-plate: linear-gradient(150deg, var(--k-a16), var(--k-a04) 78%);
	--ghost-ink: var(--k-a10);
	background-color: var(--c-bg);
	color: var(--c-ink);
}

[data-scheme='paper'] {
	--c-bg: var(--l-1);
	--c-bg-alt: var(--l-0);
	--c-surface: var(--l-0);
	--c-surface-2: var(--l-2);
	--c-surface-3: var(--l-3);
	--c-ink: var(--n-950);
	--c-ink-soft: var(--n-600);
	--c-muted: var(--n-500);
	--c-line: var(--k-a06);
	--c-line-strong: var(--k-a16);
	--c-accent: var(--n-950);
	--c-accent-hover: var(--n-900);
	--c-accent-ink: var(--n-0);
	--c-accent-quiet: var(--n-950);
	--ac-a06: var(--k-a04);
	--ac-a10: var(--k-a06);
	--ac-a16: var(--k-a10);
	--ac-a32: var(--k-a32);
	--c-focus: var(--glow);
	--c-btn-fill: var(--n-950);
	--c-btn-fill-ink: var(--n-0);
	--c-btn-fill-hover: transparent;
	--c-btn-fill-hover-ink: var(--n-950);
	--grad-card: linear-gradient(160deg, var(--l-0) 0%, var(--l-1) 60%, var(--l-2) 100%);
	--grad-card-hover: linear-gradient(160deg, var(--l-0) 0%, var(--l-0) 60%, var(--l-1) 100%);
	--grad-sheen: linear-gradient(180deg, var(--k-a04), transparent 42%);
	--chip-ink: var(--c-ink);
	--chip-plate: linear-gradient(150deg, var(--k-a06), transparent 78%);
	--chip-bloom: radial-gradient(115% 115% at 26% 16%, var(--k-a04) 0%, transparent 62%);
	--chip-ring: inset 0 0 0 1px var(--k-a10),
	             inset 0 1px 0 var(--w-a60);
	--chip-hover-ink: var(--c-ink);
	--chip-hover-plate: linear-gradient(150deg, var(--k-a16), var(--k-a04) 78%);
	--ghost-ink: var(--k-a10);
	background-color: var(--c-bg);
	color: var(--c-ink);
}

/* Legacy alias — older content may still carry scheme "invert". */
[data-scheme='invert'] { }

/* ==========================================================================
   WordPress preset bridge
   ========================================================================== */

:root {
	--wp--preset--color--ink: var(--n-950);
	--wp--preset--color--off-black: var(--d-1);
	--wp--preset--color--graphite: var(--d-3);
	--wp--preset--color--muted: var(--n-500);
	--wp--preset--color--line: var(--l-3);
	--wp--preset--color--paper: var(--l-1);
	--wp--preset--color--white: var(--n-0);
	--wp--preset--color--black: var(--d-0);
}