/* SINVYX Design System — tokens (compiled from Claude Design source) */

@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/michroma-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-800.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2');}

:root{
/* base palette — sampled from brand logo (cyan slash + blue bar) */
--c-black:#05070a;
--c-ink-900:#0a0e14;
--c-ink-800:#0d1117;
--c-ink-700:#131a24;
--c-ink-600:#1c2530;
--c-line:#232e3b;
--c-line-soft:#1a222c;
--c-white:#f5f8fa;
--c-fog-300:#c4cdd6;
--c-fog-400:#9aa7b4;
--c-fog-500:#5c6773;
--c-cyan-300:#7cf3ff;
--c-cyan-400:#2fe5ff;
--c-cyan-500:#00d4f0;
--c-blue-400:#3aa8ff;
--c-blue-500:#0092fe;
--c-blue-600:#0668c9;
--c-green-500:#3ddc97;
--c-amber-500:#ffb020;
--c-red-500:#ff5470;
/* semantic — dark surface is the primary brand mode */
--surface-void:var(--c-black);
--surface-base:var(--c-ink-800);
--surface-raised:var(--c-ink-700);
--surface-overlay:var(--c-ink-600);
--border-hairline:var(--c-line);
--border-soft:var(--c-line-soft);
--text-primary:var(--c-white);
--text-secondary:var(--c-fog-400);
--text-tertiary:var(--c-fog-500);
--text-on-accent:var(--c-black);
--accent-primary:var(--c-cyan-400);
--accent-primary-strong:var(--c-cyan-300);
--accent-secondary:var(--c-blue-500);
--accent-secondary-strong:var(--c-blue-400);
--status-success:var(--c-green-500);
--status-warning:var(--c-amber-500);
--status-danger:var(--c-red-500);
--link:var(--c-cyan-400);
--link-hover:var(--c-cyan-300);

--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--dur-fast:120ms;
--dur-base:220ms;
--dur-slow:420ms;
--shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.35);
--shadow-pop:0 16px 48px rgba(0,0,0,.5);
--glow-cyan-sm:0 0 12px rgba(47,229,255,.35);
--glow-cyan-md:0 0 32px rgba(47,229,255,.28);
--glow-cyan-lg:0 0 80px rgba(47,229,255,.22);
--glow-blue-md:0 0 32px rgba(0,146,254,.3);
--blur-panel:blur(20px);
--grad-brand:linear-gradient(115deg,var(--c-blue-500) 0%,var(--c-cyan-400) 55%,var(--c-cyan-300) 100%);
--grad-fade-bottom:linear-gradient(180deg,transparent 0%,var(--c-black) 100%);
--grad-hairline:linear-gradient(90deg,transparent 0%,var(--c-cyan-400) 50%,transparent 100%);

--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;
--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;
--container-max:1240px;--container-pad:24px;

--font-display:'Michroma','Arial Narrow',sans-serif;
--font-body:'Manrope',-apple-system,'Segoe UI',sans-serif;
--font-mono:'Space Mono','SFMono-Regular',monospace;
--text-display-xl:clamp(2.75rem,7vw,5.5rem);
--text-display-lg:clamp(2.25rem,6vw,4rem);
--text-display-md:clamp(1.75rem,4.5vw,2.75rem);
--text-title:1.5rem;
--text-body-lg:1.125rem;
--text-body:1rem;
--text-body-sm:0.875rem;
--text-caption:0.75rem;
--text-eyebrow:0.8125rem;
--lh-tight:1.05;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.65;
--ls-display:0.01em;--ls-eyebrow:0.16em;--ls-mono:0.02em;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;
}

/* No global element rules here on purpose. tokens.css loads site-wide for the
   header, and pages still rendered by Elementor/WooCommerce are laid out for a
   light background — a global dark body or cyan link colour makes their text
   unreadable. Templates that own their whole page (see home.css) set those. */