/* ============================================================
   SMASH — Colors & Type tokens
   Source of truth: assets/BRAND.md
   Dark mode only. Hulk Green is the trademark — never drift.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── BRAND COLORS ─────────────────────────── */
  --green1: #00ff6a;   /* Hulk Green — primary, CTAs, streaks, success */
  --green2: #00cc55;   /* Hulk Green 2 — wordmark gradient end, hover */
  --green3: #00ff6a22; /* tinted wash for icon chips, subtle bg */

  /* ── SURFACES ─────────────────────────────── */
  --bg: #050505;       /* app background */
  --surface: #111111;  /* card background */
  --surface2: #1a1a1a; /* hover card / elevated */
  --border: #222222;   /* hairline dividers */

  /* ── TEXT ─────────────────────────────────── */
  --text: #f0f0f0;     /* primary */
  --text2: #888888;    /* secondary / muted */
  --text3: #555555;    /* tertiary / stamps */

  /* ── STATE (never decorative) ─────────────── */
  --danger:  #ff3b3b;
  --warning: #ffb800;
  --blue:    #3b82f6;
  --purple:  #a855f7;
  --orange:  #f97316;
  --pink:    #ec4899;

  /* ── SEMANTIC ─────────────────────────────── */
  --fg: var(--text);
  --fg-muted: var(--text2);
  --fg-accent: var(--green1);
  --bg-card: var(--surface);
  --bg-card-hover: var(--surface2);
  --bg-app: var(--bg);

  /* ── RADII ────────────────────────────────── */
  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-pill: 999px;
  --radius-chip: 10px;

  /* ── SHADOWS / GLOWS ──────────────────────── */
  --shadow-cta: 0 10px 30px rgba(0, 255, 106, 0.20);
  --shadow-cta-hover: 0 14px 40px rgba(0, 255, 106, 0.35);
  --shadow-card: 0 6px 20px rgba(0, 255, 106, 0.08);
  --shadow-modal: 0 40px 80px rgba(0, 0, 0, 0.70);
  --glow-mark: 0 0 40px rgba(0, 255, 106, 0.25);

  /* ── LAYOUT ───────────────────────────────── */
  --container: 500px;       /* mobile-first mandate */
  --gutter: 20px;

  /* ── TYPE: FAMILY ─────────────────────────── */
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'Inter', ui-monospace, monospace;

  /* ── TYPE: DISPLAY / WORDMARK ─────────────── */
  --wordmark-weight: 900;
  --wordmark-tracking: 0.04em; /* +20px @ 200pt, scaled */

  --tagline-weight: 600;
  --tagline-tracking: 0.3em;  /* +6px / 20px */

  /* ── TYPE: SEMANTIC SCALE ─────────────────── */
  --h1-size: 44px; --h1-weight: 900; --h1-tracking: -1.5px; --h1-line: 0.95;
  --h2-size: 28px; --h2-weight: 900; --h2-tracking: -0.5px; --h2-line: 1.1;
  --h3-size: 20px; --h3-weight: 800; --h3-tracking: -0.3px; --h3-line: 1.2;
  --body-size: 14px; --body-weight: 500; --body-line: 1.55;
  --ui-size: 13px;   --ui-weight: 700;
  --small-size: 11px; --small-weight: 700;
  --micro-size: 10px; --micro-weight: 700; --micro-tracking: 2px;

  /* ── SPACING SCALE (8pt-ish, compact mobile) ─ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── MOTION ───────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-med: 250ms;
}

/* ── BASE ──────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
::selection { background: var(--green1); color: var(--bg); }

/* ── SEMANTIC PRESETS ─────────────────────── */
.wordmark {
  font-family: var(--font-ui);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
  background: linear-gradient(135deg, var(--green1), var(--green2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tagline-caps {
  font-weight: var(--tagline-weight);
  letter-spacing: var(--tagline-tracking);
  text-transform: uppercase;
  color: var(--text2);
  font-size: 13px;
}
.eyebrow {
  font-size: var(--micro-size);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-tracking);
  color: var(--green1);
  text-transform: uppercase;
}
h1, .h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); line-height: var(--h1-line); }
h2, .h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: var(--h2-line); }
h3, .h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: var(--h3-line); }
p, .body { font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-line); color: var(--text); }
.muted { color: var(--text2); }
code, .mono { font-family: var(--font-mono); }