107 lines
3.2 KiB
CSS
107 lines
3.2 KiB
CSS
@import 'tailwindcss';
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700&display=swap');
|
|
|
|
/* ============================================================
|
|
Smash or Pass — design tokens
|
|
Graded scales (50 = lightest, 900/950 = darkest).
|
|
The 500 step is the canonical brand value for each hue.
|
|
Semantic aliases (primary, smash, pass, bg, surface…) live
|
|
at the bottom and point at scale values — change once here
|
|
to retheme the whole app.
|
|
============================================================ */
|
|
@theme {
|
|
/* Purple — primary brand hue (anchored on #8324DE = 500) */
|
|
--color-purple-50: #faf3ff;
|
|
--color-purple-100: #f0d9ff;
|
|
--color-purple-200: #dcb3ff;
|
|
--color-purple-300: #c189f5;
|
|
--color-purple-400: #a256ec;
|
|
--color-purple-500: #8324de;
|
|
--color-purple-600: #6e1cc2;
|
|
--color-purple-700: #57169a;
|
|
--color-purple-800: #3d1070;
|
|
--color-purple-900: #270a4a;
|
|
|
|
/* Red — pass (anchored on #FF453B = 500) */
|
|
--color-red-50: #fff1f0;
|
|
--color-red-100: #ffd9d6;
|
|
--color-red-200: #ffb3ad;
|
|
--color-red-300: #ff8b82;
|
|
--color-red-400: #ff6961;
|
|
--color-red-500: #ff453b;
|
|
--color-red-600: #e0291f;
|
|
--color-red-700: #b81f17;
|
|
--color-red-800: #8a1611;
|
|
--color-red-900: #5c0e0a;
|
|
|
|
/* Lime — smash (anchored on #B9D532 = 500) */
|
|
--color-lime-50: #f6fae3;
|
|
--color-lime-100: #eaf3b8;
|
|
--color-lime-200: #d9e886;
|
|
--color-lime-300: #c8de5f;
|
|
--color-lime-400: #c1d948;
|
|
--color-lime-500: #b9d532;
|
|
--color-lime-600: #94ab26;
|
|
--color-lime-700: #6f811d;
|
|
--color-lime-800: #4d5914;
|
|
--color-lime-900: #2c330b;
|
|
|
|
/* Neutral — dark-mode greys with a slight purple tint
|
|
(50 = #FBF9FD off-white, 950 = #16141A dark grey background) */
|
|
--color-neutral-50: #fbf9fd;
|
|
--color-neutral-100: #ebe8ef;
|
|
--color-neutral-200: #d2cdda;
|
|
--color-neutral-300: #b9b1c2;
|
|
--color-neutral-400: #8e8499;
|
|
--color-neutral-500: #63586e;
|
|
--color-neutral-600: #4f4659;
|
|
--color-neutral-700: #3a3340;
|
|
--color-neutral-800: #2a2630;
|
|
--color-neutral-900: #1f1c24;
|
|
--color-neutral-950: #16141a;
|
|
|
|
/* ----------------------------------------------------------
|
|
Semantic aliases — reference these in components, not the
|
|
scale values directly, so the theme stays repaintable.
|
|
---------------------------------------------------------- */
|
|
--color-primary: var(--color-purple-500);
|
|
--color-primary-hover: var(--color-purple-400);
|
|
--color-smash: var(--color-lime-500);
|
|
--color-pass: var(--color-red-500);
|
|
|
|
--color-bg: var(--color-neutral-950);
|
|
--color-surface: var(--color-neutral-900);
|
|
--color-surface-2: var(--color-neutral-800);
|
|
--color-border: var(--color-neutral-700);
|
|
--color-text: var(--color-neutral-100);
|
|
--color-text-muted: var(--color-neutral-300);
|
|
|
|
/* Typography */
|
|
--font-sans: 'Roboto', system-ui, sans-serif;
|
|
--font-display: 'Bebas Neue', 'Roboto', sans-serif;
|
|
|
|
/* Radii */
|
|
--radius-card: 1.25rem;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
.display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0.02em;
|
|
}
|