:root{
/* --- brand hues (from logo) --- */
--brand-cyan-50:#eafdfd;--brand-cyan-100:#c9f9f9;--brand-cyan-200:#97f0f0;--brand-cyan-300:#5ae6e6;--brand-cyan-400:#37d6d6;--brand-cyan-500:#22bcbc;--brand-cyan-600:#1a9797;--brand-cyan-700:#177878;--brand-cyan-800:#155f5f;--brand-cyan-900:#124e4e;
--brand-blue-50:#e8eefb;--brand-blue-100:#c3d4f4;--brand-blue-200:#8faee9;--brand-blue-300:#5581da;--brand-blue-400:#2258c4;--brand-blue-500:#0046aa;--brand-blue-600:#00398a;--brand-blue-700:#002d6f;--brand-blue-800:#00234f;--brand-blue-900:#001a3a;
--brand-red-50:#fdecec;--brand-red-100:#fac6c6;--brand-red-200:#f59595;--brand-red-300:#f8887c;--brand-red-400:#f5382a;--brand-red-500:#f21919;--brand-red-600:#c91414;--brand-red-700:#9f1010;--brand-red-800:#780c0c;--brand-red-900:#520808;
--black:#000000;--white:#ffffff;

/* --- neutrals: cool, near-black, dark-mode-first --- */
--gray-950:#0a0b0d;--gray-900:#111318;--gray-850:#161920;--gray-800:#1d2028;--gray-700:#282c37;--gray-600:#3a3f4d;--gray-500:#565c6d;--gray-400:#7c8394;--gray-300:#a6acb9;--gray-200:#ccd0d8;--gray-100:#e6e8ec;--gray-50:#f4f5f7;

/* --- semantic: surfaces (dark mode is the primary surface) --- */
--surface-app:var(--gray-950);
--surface-1:var(--gray-900);
--surface-2:var(--gray-850);
--surface-3:var(--gray-800);
--surface-raised:var(--gray-850);
--surface-overlay:rgba(10,11,13,0.86);
--surface-inverse:var(--white);

--border-subtle:rgba(255,255,255,0.08);
--border-default:rgba(255,255,255,0.14);
--border-strong:rgba(255,255,255,0.24);
--border-focus:var(--brand-cyan-300);

/* --- semantic: text --- */
--text-primary:var(--gray-50);
--text-secondary:var(--gray-300);
--text-tertiary:var(--gray-400);
--text-disabled:var(--gray-600);
--text-inverse:var(--gray-950);
--text-link:var(--brand-cyan-300);
--text-link-hover:var(--brand-cyan-200);

/* --- semantic: brand roles --- */
--accent-primary:var(--brand-cyan-300);
--accent-primary-hover:var(--brand-cyan-200);
--accent-primary-active:var(--brand-cyan-400);
--accent-secondary:var(--brand-blue-500);
--accent-secondary-hover:var(--brand-blue-400);
--accent-energy:var(--brand-red-500);
--accent-energy-hover:var(--brand-red-400);

/* --- semantic: feedback --- */
--status-success:#2fbf71;
--status-success-surface:rgba(47,191,113,0.12);
--status-warning:#e8a83c;
--status-warning-surface:rgba(232,168,60,0.12);
--status-danger:var(--brand-red-500);
--status-danger-surface:rgba(242,25,25,0.12);
--status-info:var(--brand-blue-400);
--status-info-surface:rgba(0,70,170,0.14);

/* --- on-brand foregrounds --- */
--on-accent-primary:var(--gray-950);
--on-accent-secondary:var(--white);
--on-accent-energy:var(--white);
}

/* Substitute fonts — no brand font files were supplied. Flagged to the user in readme.md. Self-hosted via @font-face pointing at Google's static CDN. */
@font-face{font-family:'Space Grotesk';font-weight:400 700;font-style:normal;font-display:swap;src:url('https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMBBSSJLm2E.ttf') format('truetype');}
@font-face{font-family:'Inter';font-weight:400 700;font-style:normal;font-display:swap;src:url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.ttf') format('truetype');}
@font-face{font-family:'Space Mono';font-weight:400;font-style:normal;font-display:swap;src:url('https://fonts.gstatic.com/s/spacemono/v13/i7dPIFZifjKcF5UAWdDRUEZ2RFq7AwU.ttf') format('truetype');}
@font-face{font-family:'Space Mono';font-weight:700;font-style:normal;font-display:swap;src:url('https://fonts.gstatic.com/s/spacemono/v13/i7dMIFZifjKcF5UAWdDRYERE_FeaGy6QZ3WfYg.ttf') format('truetype');}
:root{
--font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
--font-mono:'Space Mono',ui-monospace,'SF Mono',monospace;

--font-size-display-xl:4.5rem;
--font-size-display-l:3.25rem;
--font-size-display-m:2.5rem;
--font-size-h1:2.25rem;
--font-size-h2:1.75rem;
--font-size-h3:1.375rem;
--font-size-h4:1.125rem;
--font-size-body-l:1.125rem;
--font-size-body:1rem;
--font-size-body-s:0.875rem;
--font-size-caption:0.75rem;
--font-size-mono:0.875rem;

--leading-tight:1.05;
--leading-snug:1.25;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-tight:-0.02em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-widest:0.12em;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;--space-48:192px;

--container-max:1240px;
--container-pad:24px;

--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-pill:999px;
--radius-focus-ring:4px;
}

:root{
/* Qalmuq is dark-mode-first, technical: shadows are near-black + a thin hairline, not soft drop-shadows. Elevation reads mostly through border + subtle glow, not blur. */
--shadow-sm:0 1px 2px rgba(0,0,0,0.4);
--shadow-md:0 4px 12px rgba(0,0,0,0.45),0 1px 0 rgba(255,255,255,0.03) inset;
--shadow-lg:0 12px 32px rgba(0,0,0,0.55),0 1px 0 rgba(255,255,255,0.04) inset;
--shadow-focus:0 0 0 3px rgba(90,230,230,0.35);
--glow-cyan:0 0 24px rgba(90,230,230,0.25);
--glow-red:0 0 24px rgba(242,25,25,0.25);

--ease-standard:cubic-bezier(0.2,0.8,0.2,1); /* @kind other */
--ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
--ease-in:cubic-bezier(0.7,0,0.84,0); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:360ms; /* @kind other */

--blur-panel:16px;
--overlay-scrim:rgba(5,6,8,0.72);
}