/* Neon Bao - tokens du design system. Source : design_system/tokens/*.css
   Ne pas ecrire de valeur en dur ailleurs : tout passe par ces variables. */

/* ---------- colors ---------- */
:root{
/* ── Base: neon tubes ─────────────────────────────────────────────
   Sampled from the Neon Bão sign. Each tube has a hot CORE (near-white,
   what the glass looks like lit), a SATURATED body, and a DEEP burn-in
   value used for unlit tubes, borders-at-rest and dark fills. */
--nb-green-core:#DDFFCB;--nb-green:#58F23C;--nb-green-deep:#2A9E1D;--nb-green-ash:#16351B;
--nb-violet-core:#F2DBFF;--nb-violet:#B44BFF;--nb-violet-deep:#6C1FA8;--nb-violet-ash:#221033;
--nb-lilac:#E4C4FF;

/* ── Base: ink (the wall the sign hangs on) ─────────────────────── */
--nb-ink-000:#08080A;--nb-ink-050:#0E0E11;--nb-ink-100:#16161A;--nb-ink-200:#202027;--nb-ink-300:#2E2E38;
--nb-smoke:#868694; /* eclairci le 23/09/2026 : #6A6A78 echouait au contraste WCAG AA (3,4:1) */--nb-chalk:#C8C8D2;--nb-white:#F6F4FA;

/* ── Base: semantics (used sparingly, never as decoration) ─────── */
--nb-chili:#FF3355;--nb-chili-ash:#3A0F19;
--nb-ginger:#FFB300;--nb-ginger-ash:#3A2A05;

/* ── Semantic aliases ──────────────────────────────────────────── */
--surface-wall:var(--nb-ink-000);      /* page background */
--surface-panel:var(--nb-ink-050);     /* sheets, nav, drawers */
--surface-card:var(--nb-ink-100);      /* cards, list rows */
--surface-raised:var(--nb-ink-200);    /* inputs, chips, hovered rows */
--surface-line:var(--nb-ink-300);      /* hairlines, dividers */

--text-loud:var(--nb-white);           /* headlines */
--text-body:var(--nb-chalk);           /* paragraphs */
--text-quiet:var(--nb-smoke);          /* captions, meta, disabled */
--text-green:var(--nb-green-core);     /* lit text on dark */
--text-violet:var(--nb-violet-core);

--accent-primary:var(--nb-green);      /* action, "go", price, live */
--accent-secondary:var(--nb-violet);   /* brand mood, headings, hover */
--accent-primary-ash:var(--nb-green-ash);
--accent-secondary-ash:var(--nb-violet-ash);

--border-tube:var(--nb-violet);        /* default lit border */
--border-tube-off:var(--nb-ink-300);   /* unlit border */
--border-hot:var(--nb-green);

--state-danger:var(--nb-chili);--state-warning:var(--nb-ginger);--state-success:var(--nb-green);
--focus-ring:var(--nb-green-core);
}

/* ---------- spacing ---------- */
:root{
/* 4px base, but the brand skips steps: tight inside, loud between */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:144px;
--gutter:var(--sp-5); /* @kind spacing */
--pad-card:var(--sp-5); /* @kind spacing */
--pad-panel:var(--sp-6); /* @kind spacing */
--pad-control-x:var(--sp-5); /* @kind spacing */
--pad-control-y:var(--sp-3); /* @kind spacing */
--section-y:var(--sp-9); /* @kind spacing */
--measure:62ch; /* @kind spacing */
--container:1200px; /* @kind spacing */
--container-narrow:760px; /* @kind spacing */
--control-h:44px; /* @kind spacing */
--control-h-sm:34px; /* @kind spacing */
--control-h-lg:56px; /* @kind spacing */
--tube-w:2px; /* @kind spacing */
--tube-w-thick:3px; /* @kind spacing */
}

/* ---------- typography ---------- */
:root{
--font-display:"Syne",system-ui,sans-serif;   /* raw, wide, emotional headlines */
--font-tube:"Jost",system-ui,sans-serif;      /* neon-tube lettering + all UI text */
--font-mono:"Space Mono",ui-monospace,monospace; /* receipts, prices, timers, labels */

/* Scale — brutal jumps, no polite middle steps */
--fs-mega:clamp(56px,11vw,160px); /* @kind font */
--fs-hero:clamp(40px,7vw,96px); /* @kind font */
--fs-h1:48px;--fs-h2:34px;--fs-h3:24px;--fs-h4:19px;
--fs-body:16px;--fs-body-lg:18px;--fs-small:14px;--fs-micro:11px;

--lh-crush:.86; /* @kind font */
--lh-tight:1.05; /* @kind font */
--lh-snug:1.3; /* @kind font */
--lh-body:1.55; /* @kind font */

--ls-mega:-.03em; /* @kind font */
--ls-tight:-.01em; /* @kind font */
--ls-normal:0; /* @kind font */
--ls-wide:.08em; /* @kind font */
--ls-sign:.22em; /* @kind font */
--ls-tag:.16em; /* @kind font */

--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */

/* Composed roles */
--type-mega:var(--fw-black) var(--fs-mega)/var(--lh-crush) var(--font-display); /* @kind font */
--type-hero:var(--fw-black) var(--fs-hero)/var(--lh-crush) var(--font-display); /* @kind font */
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display); /* @kind font */
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-display); /* @kind font */
--type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-tube); /* @kind font */
--type-sign:var(--fw-light) var(--fs-h3)/var(--lh-tight) var(--font-tube); /* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-tube); /* @kind font */
--type-label:var(--fw-bold) var(--fs-micro)/1 var(--font-mono); /* @kind font */
--type-price:var(--fw-bold) var(--fs-body-lg)/1 var(--font-mono); /* @kind font */
}

/* ---------- effects ---------- */
:root{
/* ── Radii: mostly raw. Tubes bend, panels don't. ── */
--r-none:0; /* @kind radius */
--r-hair:2px; /* @kind radius */
--r-tube:999px; /* @kind radius */
--r-soft:6px; /* @kind radius */

/* ── Glow: the shadow system. Neon glows outward AND bleeds inward. ── */
--glow-green-sm:0 0 6px rgba(88,242,60,.55); /* @kind shadow */
--glow-green:0 0 4px rgba(221,255,203,.9),0 0 14px rgba(88,242,60,.65),0 0 38px rgba(88,242,60,.35); /* @kind shadow */
--glow-green-lg:0 0 6px rgba(221,255,203,.95),0 0 22px rgba(88,242,60,.7),0 0 70px rgba(88,242,60,.45); /* @kind shadow */
--glow-violet-sm:0 0 6px rgba(180,75,255,.55); /* @kind shadow */
--glow-violet:0 0 4px rgba(242,219,255,.9),0 0 14px rgba(180,75,255,.65),0 0 38px rgba(180,75,255,.35); /* @kind shadow */
--glow-violet-lg:0 0 6px rgba(242,219,255,.95),0 0 22px rgba(180,75,255,.7),0 0 70px rgba(180,75,255,.45); /* @kind shadow */
--glow-inner-violet:inset 0 0 24px rgba(180,75,255,.16); /* @kind shadow */
--glow-inner-green:inset 0 0 24px rgba(88,242,60,.14); /* @kind shadow */

/* Text glow = tube lettering. Layered white core + colour bleed. */
--text-glow-green:0 0 3px #DDFFCB,0 0 12px rgba(88,242,60,.85),0 0 30px rgba(88,242,60,.5); /* @kind shadow */
--text-glow-violet:0 0 3px #F2DBFF,0 0 12px rgba(180,75,255,.85),0 0 30px rgba(180,75,255,.5); /* @kind shadow */
--text-glow-off:0 0 0 rgba(0,0,0,0); /* @kind shadow */

/* ── Hard shadows: the "sticker / paste-up" system. No blur, ever. ── */
--stack-violet:6px 6px 0 var(--nb-violet-deep); /* @kind shadow */
--stack-green:6px 6px 0 var(--nb-green-deep); /* @kind shadow */
--stack-ink:6px 6px 0 #000; /* @kind shadow */

/* ── Texture: wall grain + scanlines, applied as background layers ── */
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); /* @kind other */
--noise-opacity:.055; /* @kind other */
--scanlines:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px); /* @kind other */
--wall-wash:radial-gradient(120% 80% at 50% -10%,rgba(180,75,255,.12),transparent 60%),radial-gradient(90% 60% at 85% 110%,rgba(88,242,60,.09),transparent 60%); /* @kind other */

/* ── Blur / transparency: only for glass over the wall ── */
--glass:rgba(14,14,17,.72); /* @kind color */
--glass-blur:blur(14px); /* @kind other */
--veil:rgba(8,8,10,.86); /* @kind color */
}

/* ---------- motion ---------- */
:root{
--dur-flick:70ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-marquee:22s; /* @kind other */

--ease-snap:cubic-bezier(.2,.9,.1,1); /* @kind other */
--ease-buzz:cubic-bezier(.36,.07,.19,.97); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.2); /* @kind other */

--press-shift:2px; /* @kind spacing */
}
@keyframes nb-flicker{0%,100%{opacity:1}42%{opacity:1}43%{opacity:.28}44%{opacity:1}70%{opacity:1}71%{opacity:.5}72.5%{opacity:1}}
@keyframes nb-buzz{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(1px,1px)}}
@keyframes nb-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes nb-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){:root{--dur-marquee:0s /* @kind other */;}*{animation:none!important}}