/* ==========================================================================
   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);

	/* Cards get their own, much shallower elevation. The md/lg pair above is
	   sized for media and overlays; on a card it pooled a soft grey cloud
	   forty pixels past the edge, which read as blur rather than lift. */
	--shadow-card: 0 1px 2px hsl(var(--d-h) 45% 2% / 0.08),
	               0 3px 8px -3px hsl(var(--d-h) 45% 2% / 0.14);
	--shadow-card-hover: 0 2px 4px -1px hsl(var(--d-h) 45% 2% / 0.10),
	                     0 8px 18px -8px hsl(var(--d-h) 45% 2% / 0.20);
	--shadow-glow-sm: 0 6px 18px -10px 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);
}