/*
* WSNG Panel — design overrides ("refine current indigo")
* ========================================================
* Loaded AFTER the bundled Tailwind CSS via index.html:
*
*
* What this layer does (token-level only, no layout changes):
* 1. Type — self-hosted Geist Sans + Geist Mono (Inter replaced),
* tabular numerals for the data-heavy screens.
* 2. Neutrals — all grays re-tinted from blue-220 to one indigo-family
* hue (235), so surfaces and the primary share a temperature.
* 3. Radius — 16px -> 11px on controls; cards keep 16px (rounded-2xl),
* so hierarchy comes from radius variation.
* 4. Shadows — generic black shadows replaced with indigo-tinted ones;
* one light source (top), softer layering.
* 5. Chrome — focus rings everywhere, press feedback, quiet scrollbars,
* selection color, balanced headings.
*
* Rollback: remove the tag from index.html. Nothing else is affected.
* When the webpanel source is available, fold the :root/.dark blocks into
* src/index.css and set font-family + --radius in tailwind.config, then delete
* this file.
*/
/* ---------------------------------------------------------------- fonts -- */
@font-face {
font-family: "Geist";
src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Mono";
src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ---------------------------------------------------------------- light -- */
:root {
/* primary: same indigo hue, two steps deeper — reads less candy, more ink */
--primary: 252 64% 50%;
--primary-hover: 252 68% 44%;
--ring: 252 64% 50%;
--primary-subtle: 252 60% 96%;
/* one neutral family: hue 235 instead of 220 (indigo-tinted grays) */
--background: 235 30% 97%;
--foreground: 235 26% 11%;
--surface: 0 0% 100%;
--surface-muted: 235 22% 95.5%;
--border: 235 16% 90%;
--input: 235 16% 88%;
--muted: 235 20% 95%;
--muted-foreground: 234 12% 45%;
/* status colors, same hues, slightly less neon */
--success: 152 55% 36%;
--warning: 34 88% 44%;
--danger: 356 68% 49%;
/* crisper: controls tighten, containers keep their 16px (rounded-2xl) */
--radius: 11px;
}
/* ----------------------------------------------------------------- dark -- */
.dark {
--background: 235 32% 7%;
--foreground: 235 20% 95%;
--surface: 235 28% 10%;
--surface-muted: 235 24% 14%;
--border: 235 18% 19%;
--input: 235 18% 22%;
--ring: 252 88% 70%;
--primary: 252 88% 68%;
--primary-hover: 252 90% 74%;
--primary-foreground: 235 32% 9%;
--primary-subtle: 252 40% 18%;
--muted: 235 22% 16%;
--muted-foreground: 233 14% 66%;
--success: 152 50% 46%;
--warning: 34 88% 56%;
--danger: 356 72% 60%;
}
/* ---------------------------------------------------------------- type --- */
body {
font-family: "Geist", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
sans-serif;
/* the panel is numbers-first (SMS streams, finance, health): tabular digits
stop columns of figures from jittering */
font-variant-numeric: tabular-nums;
letter-spacing: 0.001em;
}
.font-mono, code, kbd, samp, pre {
font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
monospace;
}
h1, h2, h3 {
letter-spacing: -0.022em;
text-wrap: balance;
}
h4, h5, h6 { letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
/* -------------------------------------------------------------- shadows -- */
/* indigo-tinted, one light source from above; replaces generic rgb(0 0 0/.1) */
.shadow {
--tw-shadow: 0 1px 2px 0 rgb(35 33 81 / 0.07),
0 2px 8px -2px rgb(35 33 81 / 0.08);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(35 33 81 / 0.06);
}
.shadow-md {
--tw-shadow: 0 2px 6px -1px rgb(35 33 81 / 0.09),
0 4px 14px -4px rgb(35 33 81 / 0.10);
}
.shadow-lg {
--tw-shadow: 0 8px 24px -6px rgb(35 33 81 / 0.14),
0 2px 6px -2px rgb(35 33 81 / 0.07);
}
.shadow-pop {
--tw-shadow: 0 16px 40px -12px rgb(35 33 81 / 0.26),
0 4px 12px -6px rgb(35 33 81 / 0.10);
}
/* dark mode: shadows barely read — lean on surface depth + a hairline lift */
.dark .shadow, .dark .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4); }
.dark .shadow-md, .dark .shadow-lg {
--tw-shadow: 0 0 0 1px rgb(255 255 255 / 0.02), 0 8px 24px -10px rgb(0 0 0 / 0.55);
}
.dark .shadow-pop {
--tw-shadow: 0 0 0 1px rgb(255 255 255 / 0.03), 0 20px 48px -16px rgb(0 0 0 / 0.65);
}
/* ------------------------------------------------------- micro-interact -- */
/* 150-200ms on color/edge states; existing Tailwind transition-* classes
(higher specificity) keep winning wherever the app already animates */
button, a, input, select, textarea, [role="button"] {
transition: background-color 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease, color 0.18s ease, fill 0.18s ease;
}
/* physical press — skipped on elements that already animate transforms */
button:not([class*="scale-"]):not([class*="translate-"]):not(:disabled):active {
transform: translateY(0.5px);
}
/* visible keyboard focus everywhere the app doesn't already ring */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid hsl(var(--ring) / 0.85);
outline-offset: 2px;
}
::selection {
background: hsl(var(--primary) / 0.16);
}
* {
-webkit-tap-highlight-color: hsl(var(--primary) / 0.12);
}
/* ----------------------------------------------------------- scrollbars -- */
* {
scrollbar-width: thin;
scrollbar-color: hsl(var(--border)) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 9999px;
border: 2px solid transparent;
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
background-clip: content-box;
}
/* ---------------------------------------------------------------- a11y --- */
@media (prefers-reduced-motion: reduce) {
button, a, input, select, textarea, [role="button"] { transition: none; }
button:not([class*="scale-"]):not([class*="translate-"]):not(:disabled):active {
transform: none;
}
}