/* =========================================================================
   SN Blog — Design tokens (v2)
   Single source of truth for colour, type, space, radius, shadow, motion.
   Loaded on every page, before every other SN stylesheet.
   ========================================================================= */

:root {
	/* ---- brand ------------------------------------------------------- */
	--snb-navy-900: #0b1425;
	--snb-navy-800: #0e172d;   /* brand navy (matches Elementor kit 1b95cf9) */
	--snb-navy-700: #16233c;
	--snb-navy-600: #1d2d4b;
	--snb-navy-500: #27395c;
	--snb-slate-500: #5e6782;  /* kit 6ffc17a, kept for continuity */

	/* ---- accent (one blue, everywhere) -------------------------------- */
	--snb-accent: #2f6fed;          /* 4.55:1 on white */
	--snb-accent-strong: #1f57c9;   /* hover / active */
	--snb-accent-soft: #eef3fe;
	--snb-accent-line: #c8dafd;
	--snb-accent-on-dark: #8ab0ff;  /* 8.3:1 on navy-800 */
	--snb-accent-on-dark-strong: #a8c4ff;

	/* ---- neutrals ----------------------------------------------------- */
	--snb-ink: #101b2e;        /* 16.4:1 on white */
	--snb-ink-2: #43536d;      /* 7.8:1 */
	--snb-muted: #5b6a84;      /* 5.5:1 */
	--snb-faint: #8493a9;      /* 3.4:1 — non-essential only */

	--snb-bg: #f5f7fb;
	--snb-bg-2: #eef2f8;
	--snb-surface: #ffffff;
	--snb-surface-2: #f8fafc;
	--snb-surface-3: #f1f5fa;
	--snb-hover: #eff4fc;

	--snb-line: #e3e8f1;
	--snb-line-2: #d3dbe8;
	--snb-line-strong: #c2cee2;

	/* ---- status ------------------------------------------------------- */
	--snb-ok: #0f7a56;
	--snb-warn: #9a5b06;
	--snb-danger: #b3261e;
	--snb-ok-soft: #e8f6f0;
	--snb-warn-soft: #fdf3e3;
	--snb-danger-soft: #fdecea;

	/* ---- code --------------------------------------------------------- */
	--snb-code-bg: #0d1729;
	--snb-code-ink: #dbe7f8;

	/* ---- advertising -------------------------------------------------- */
	--snb-ad-line: #d5deee;
	--snb-ad-label: #8493a9;

	/* ---- type --------------------------------------------------------- */
	--snb-font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--snb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--snb-fs-xs: 12.5px;
	--snb-fs-sm: 13.5px;
	--snb-fs-ui: 14.5px;
	--snb-fs-base: 16px;
	--snb-fs-body: 17px;
	--snb-fs-lg: 19px;
	--snb-fs-xl: 21px;
	--snb-fs-2xl: 24px;
	--snb-fs-3xl: 28px;
	--snb-fs-4xl: clamp(28px, 3.2vw, 34px);
	--snb-fs-5xl: clamp(32px, 4.4vw, 44px);
	--snb-fs-6xl: clamp(36px, 5.4vw, 56px);

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

	--snb-lh-tight: 1.12;
	--snb-lh-snug: 1.3;
	--snb-lh-normal: 1.5;
	--snb-lh-relaxed: 1.65;
	--snb-lh-loose: 1.75;

	--snb-track-tight: -0.022em;
	--snb-track-snug: -0.012em;
	--snb-track-wide: 0.02em;
	--snb-track-caps: 0.11em;

	/* ---- space -------------------------------------------------------- */
	--snb-s1: 4px;
	--snb-s2: 8px;
	--snb-s3: 12px;
	--snb-s4: 16px;
	--snb-s5: 20px;
	--snb-s6: 24px;
	--snb-s7: 32px;
	--snb-s8: 40px;
	--snb-s9: 56px;
	--snb-s10: 72px;
	--snb-s11: 96px;

	/* ---- radius ------------------------------------------------------- */
	--snb-r-xs: 6px;
	--snb-r-sm: 8px;
	--snb-r-md: 12px;
	--snb-r-lg: 16px;
	--snb-r-xl: 22px;
	--snb-r-pill: 999px;

	/* ---- elevation ---------------------------------------------------- */
	--snb-sh-1: 0 1px 2px rgba(13, 23, 41, 0.06), 0 1px 3px rgba(13, 23, 41, 0.04);
	--snb-sh-2: 0 4px 12px -2px rgba(13, 23, 41, 0.09), 0 2px 6px -2px rgba(13, 23, 41, 0.05);
	--snb-sh-3: 0 14px 30px -10px rgba(13, 23, 41, 0.16), 0 4px 12px -4px rgba(13, 23, 41, 0.07);
	--snb-sh-4: 0 28px 56px -20px rgba(13, 23, 41, 0.28);

	/* ---- layout ------------------------------------------------------- */
	--snb-container: 1200px;
	--snb-container-wide: 1320px;
	--snb-gutter: clamp(16px, 4vw, 32px);
	--snb-article: 720px;
	--snb-rail: 320px;
	--snb-header-h: 64px;

	/* ---- motion ------------------------------------------------------- */
	--snb-dur-1: 120ms;
	--snb-dur-2: 180ms;
	--snb-dur-3: 240ms;
	--snb-dur-4: 320ms;
	--snb-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
	--snb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--snb-z-header: 90;
	--snb-z-progress: 100;
	--snb-z-totop: 80;
}

/* -------------------------------------------------------------------------
   Typeface
   Inter is self-hosted (variable, latin + latin-ext subsets): one cached file
   instead of a third-party CSS round-trip plus separate weight files, and the
   font is available from the first paint. The metrics-matched fallback keeps
   heading line counts stable during the swap, which removes the largest CLS
   source on archive pages.
   ---------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/inter-latin-var.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+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: 400 800;
	font-display: swap;
	src: url("fonts/inter-latin-ext-var.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, 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: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.43%;
	line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   Dark theme — applied by the header toggle or system preference.
   ---------------------------------------------------------------------- */
:root.snb-dark {
	color-scheme: dark;

	--snb-ink: #e9eff9;
	--snb-ink-2: #c3cfe2;
	--snb-muted: #9dabc2;
	--snb-faint: #7e8ca3;

	--snb-bg: #0c1424;
	--snb-bg-2: #0a1120;
	--snb-surface: #121c30;
	--snb-surface-2: #16223a;
	--snb-surface-3: #1a2740;
	--snb-hover: #1c2b47;

	--snb-line: #263551;
	--snb-line-2: #31425f;
	--snb-line-strong: #3d5073;

	--snb-accent: #7ba6ff;
	--snb-accent-strong: #a3c1ff;
	--snb-accent-soft: #17243d;
	--snb-accent-line: #2c4370;
	--snb-accent-on-dark: #a3c1ff;
	--snb-accent-on-dark-strong: #c0d3ff;

	--snb-navy-800: #0a1120;
	--snb-navy-700: #101a2d;

	--snb-code-bg: #050a13;
	--snb-code-ink: #cdd9f0;

	--snb-ad-line: #2c3d5c;
	--snb-ad-label: #7e8ca3;

	--snb-sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--snb-sh-2: 0 4px 14px -2px rgba(0, 0, 0, 0.5);
	--snb-sh-3: 0 16px 34px -12px rgba(0, 0, 0, 0.62);
	--snb-sh-4: 0 28px 56px -20px rgba(0, 0, 0, 0.7);

	--snb-ok: #43c295;
	--snb-warn: #dfa64f;
	--snb-danger: #ff8b80;
	--snb-ok-soft: #10281f;
	--snb-warn-soft: #2a2113;
	--snb-danger-soft: #2c1614;
}

/* Dark surfaces swallow plain shadows — add a hairline for definition. */
:root.snb-dark .snb-card,
:root.snb-dark .snb-widget,
:root.snb-dark .snb-article {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}