/* ==========================================================================
   BLKTHRN GRP — Design Tokens (v1.2)
   Brand: electric blue #2563EB · ink #0A0A0A · white · grey scale.
   Dark-first, confident, sharp. Re-skin the whole site from this file.
   ========================================================================== */

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

:root {
	/* ---- Brand ---- */
	--ink: #0A0A0A;
	--ink-rgb: 10, 10, 10;
	--ink-2: #111217;      /* layered dark surface */
	--ink-3: #181A21;      /* raised dark surface  */
	--white: #FFFFFF;

	--blue: #2563EB;       /* primary accent       */
	--blue-rgb: 37, 99, 235;
	--blue-700: #1D4ED8;
	--blue-400: #60A5FA;   /* glow / highlights    */
	--blue-200: #BFD3FE;

	/* Cool multi-accent spectrum (in-brand variety, à la Stripe/Linear) */
	--cyan: #06B6D4;    --cyan-rgb: 6, 182, 212;    --cyan-400: #22D3EE;
	--violet: #7C3AED;  --violet-rgb: 124, 58, 237; --violet-400: #A78BFA;
	--emerald: #10B981; --emerald-rgb: 16, 185, 129; --emerald-400: #34D399;
	--indigo: #6366F1;  --indigo-rgb: 99, 102, 241; --indigo-400: #818CF8;
	--grad-spectrum: linear-gradient(120deg, #2563EB 0%, #7C3AED 52%, #06B6D4 100%);

	/* ---- Grey scale ---- */
	--grey-50: #F7F8FA;
	--grey-100: #EEF0F4;
	--grey-200: #E3E6EC;
	--grey-300: #CBD0DA;
	--grey-400: #9AA1AE;
	--grey-500: #6B7280;
	--grey-600: #4B5563;
	--grey-700: #374151;
	--grey-900: #14161B;

	/* ---- Semantic ---- */
	--bg: var(--white);
	--bg-alt: var(--grey-50);
	--bg-dark: var(--ink);
	--text: #15171C;
	--text-soft: var(--grey-500);
	--text-invert: #F4F6FA;
	--text-invert-soft: #AEB4C0;
	--line: var(--grey-200);
	--line-dark: rgba(255, 255, 255, 0.09);

	/* ---- Typography ---- */
	--font-head: "Space Grotesk", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fs-eyebrow: 0.78rem;
	--fs-body: 1.0625rem;
	--fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	--fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
	--fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
	--fs-display: clamp(3rem, 1.6rem + 6vw, 6.5rem);
	--lh-tight: 1.02;
	--lh-snug: 1.18;
	--lh-body: 1.68;
	--tracking-head: -0.025em;
	--tracking-eyebrow: 0.18em;

	/* ---- Layout ---- */
	--container: 1200px;
	--container-narrow: 760px;
	--gap: 1.5rem;
	--section-y: clamp(2.75rem, 1.9rem + 3.2vw, 5.25rem);
	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-xl: 26px;
	--radius-pill: 999px;

	/* ---- Effects ---- */
	--shadow-sm: 0 1px 2px rgba(10, 10, 15, 0.05), 0 4px 12px rgba(10, 10, 15, 0.05);
	--shadow-md: 0 10px 30px rgba(10, 10, 15, 0.10);
	--shadow-lg: 0 28px 70px rgba(10, 10, 15, 0.20);
	--glow-blue: 0 10px 40px rgba(var(--blue-rgb), 0.35);
	--ring: 0 0 0 3px rgba(var(--blue-rgb), 0.45);

	--grad-blue: linear-gradient(135deg, #3B82F6 0%, var(--blue) 45%, var(--blue-700) 100%);
	--grad-text: linear-gradient(100deg, #FFFFFF 0%, #C7D6FF 60%, var(--blue-400) 100%);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--transition: 240ms var(--ease);

	--header-h: 78px;

	/* ---- v1.6 cinematic additions ---- */
	--glass-bg: rgba(255, 255, 255, 0.04);
	--glass-border: rgba(255, 255, 255, 0.10);
	--glass-blur: 16px;
	--shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.45);
	--dur-entrance: 720ms;
	--dur-hover: 220ms;

	/* Decorative SVG patterns (no images needed) */
	--grid-line: rgba(255, 255, 255, 0.045);
	--dot-line: rgba(var(--blue-rgb), 0.12);
}

/* Self-hosted fallback: drop woff2 files in /assets/fonts and uncomment to remove the CDN.
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk.woff2") format("woff2");font-weight:500 700;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap;}
*/