/* LSN-Studios Design System – Tokens (übernommen aus Claude Design, Stand 28.10.2026) */
:root{
/* Brand — turquoise ramp sampled from the logo bracket */
--lsn-cyan-50:#e6fffd;--lsn-cyan-100:#b3fff9;--lsn-cyan-200:#66fff4;--lsn-cyan-300:#00fff0;--lsn-cyan-400:#00e6e0;--lsn-cyan-500:#00c9c6;--lsn-cyan-600:#00aeab;--lsn-cyan-700:#009494;--lsn-cyan-800:#007373;--lsn-cyan-900:#004d4f;
/* Navy — the logo background */
--lsn-navy-50:#eef3f8;--lsn-navy-100:#d5e0eb;--lsn-navy-200:#a9bdd2;--lsn-navy-300:#7393b2;--lsn-navy-400:#456b8f;--lsn-navy-500:#2a4d6e;--lsn-navy-600:#1f3d5a;--lsn-navy-700:#1a3650;--lsn-navy-800:#142b42;--lsn-navy-900:#0e2034;--lsn-navy-950:#091726;
/* Neutrals (cool, slightly blue) */
--lsn-gray-0:#ffffff;--lsn-gray-50:#f5f8fa;--lsn-gray-100:#e9eef2;--lsn-gray-200:#d6dee5;--lsn-gray-300:#b4c0cb;--lsn-gray-400:#8494a3;--lsn-gray-500:#5f6f7e;--lsn-gray-600:#46535f;--lsn-gray-700:#323c46;--lsn-gray-800:#1f262d;--lsn-gray-900:#111518;--lsn-black:#000000;
/* Semantic */
--lsn-success:#1fbf75;--lsn-warning:#f5a524;--lsn-danger:#ef4a5a;--lsn-info:#00aeab;
--lsn-success-soft:#e3f8ee;--lsn-warning-soft:#fdf2dd;--lsn-danger-soft:#fde6e8;--lsn-info-soft:#e0f7f6;

/* Gradients — the logo signature: bright cyan fading to deep teal */
--gradient-brand:linear-gradient(90deg,#00fff0 0%,#00c9c6 55%,#009494 100%);/* @kind color */
--gradient-brand-reverse:linear-gradient(90deg,#009494 0%,#00c9c6 45%,#00fff0 100%);/* @kind color */
--gradient-brand-diagonal:linear-gradient(135deg,#00fff0 0%,#00aeab 60%,#007373 100%);/* @kind color */
--gradient-navy:radial-gradient(ellipse at 50% 45%,#1f3d5a 0%,#142b42 60%,#0e2034 100%);/* @kind color */
--gradient-navy-linear:linear-gradient(180deg,#1a3650 0%,#0e2034 100%);/* @kind color */
--gradient-glow:radial-gradient(closest-side,rgba(0,255,240,.22),rgba(0,255,240,0));/* @kind color */

/* Semantic aliases — dark (default brand surface) */
--surface-page:var(--lsn-navy-900);
--surface-raised:var(--lsn-navy-800);
--surface-card:rgba(255,255,255,.04);
--surface-card-hover:rgba(255,255,255,.07);
--surface-inverse:var(--lsn-gray-0);
--surface-light:var(--lsn-gray-0);
--surface-light-muted:var(--lsn-gray-50);
--text-on-dark:#ffffff;--text-on-dark-muted:#a9bdd2;--text-on-dark-subtle:#7393b2;
--text-body:var(--lsn-gray-800);--text-muted:var(--lsn-gray-500);--text-heading:var(--lsn-navy-900);
--text-accent:var(--lsn-cyan-300);--text-accent-on-light:var(--lsn-cyan-800);
--border-on-dark:rgba(255,255,255,.10);--border-on-dark-strong:rgba(255,255,255,.18);
--border-on-light:var(--lsn-gray-200);--border-on-light-strong:var(--lsn-gray-300);
--accent:var(--lsn-cyan-300);--accent-hover:var(--lsn-cyan-200);--accent-press:var(--lsn-cyan-500);--accent-ink:var(--lsn-navy-950);
--focus-ring:0 0 0 3px rgba(0,255,240,.35);
}
:root{
--font-display:"Saira","Eurostile","Microgramma",system-ui,sans-serif;
--font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--fs-display:64px;--fs-h1:48px;--fs-h2:36px;--fs-h3:26px;--fs-h4:20px;--fs-lg:18px;--fs-body:16px;--fs-sm:14px;--fs-xs:12px;
--lh-tight:1.1;/* @kind font */--lh-heading:1.2;/* @kind font */--lh-body:1.6;/* @kind font */
--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
--ls-display:-0.01em;/* @kind font */--ls-eyebrow:0.14em;/* @kind font */
}
: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;
--container-max:1200px;--container-pad:24px;--section-y:96px;
}
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
--stroke-bracket:6px;/* @kind spacing */
--shadow-sm:0 1px 2px rgba(9,23,38,.08),0 1px 3px rgba(9,23,38,.06);
--shadow-md:0 6px 16px rgba(9,23,38,.10),0 2px 4px rgba(9,23,38,.06);
--shadow-lg:0 20px 48px rgba(9,23,38,.18),0 6px 12px rgba(9,23,38,.08);
--shadow-dark:0 20px 50px rgba(0,0,0,.35);
--glow-accent:0 0 0 1px rgba(0,255,240,.35),0 8px 30px rgba(0,255,240,.18);
--blur-glass:blur(14px);/* @kind other */
--ease-out:cubic-bezier(.22,1,.36,1);/* @kind other */--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:400ms;/* @kind other */
}