first

sop-front/src/assets/main.css

@@ -0,0 +1,59 @@
+@import 'tailwindcss';
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');
+
+/* ============================================================
+   Smash or Pass — design tokens
+   Palette source: provided reference image.
+   ============================================================ */
+@theme {
+  /* Brand palette */
+  --color-tongue: #b9d532; /* smash / accent green */
+  --color-iris: #ff453b; /* pass / red */
+  --color-paws: #63586e; /* muted */
+  --color-fur: #fbf9fd; /* off-white */
+  --color-rayures: #f0d9ff; /* soft lilac */
+  --color-body: #bfa2db; /* light purple */
+  --color-body2: #8363a2; /* mid purple */
+  --color-clothes: #8324de; /* primary purple */
+
+  /* Semantic roles */
+  --color-bg: #16141a; /* dark grey background */
+  --color-surface: #1f1c24; /* card surface */
+  --color-surface-2: #2a2630; /* elevated surface */
+  --color-border: #3a3340;
+  --color-text: #fbf9fd;
+  --color-text-muted: #b9b1c2;
+
+  --color-primary: #8324de;
+  --color-primary-hover: #9442e8;
+  --color-smash: #b9d532;
+  --color-pass: #ff453b;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-display: 'Bebas Neue', 'Inter', 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;
+}