@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;
}