/*
 * Global design tokens and reset.
 * Landing-page styles live in landing.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Backgrounds */
  --bg: #0b0e14;
  --card: #12161f;
  --surface: #1a1f2b;
  --input: #0f1219;

  /* Borders */
  --border: #1e2433;
  --border-h: #2a3145;

  /* Text */
  --t1: #e8eaf0;
  --t2: #8891a5;
  --t3: #565e72;
  --t4: #c8ccd8;

  /* Accent: indigo - established brand color */
  --accent: #6366f1;
  --accent-s: rgba(99, 102, 241, 0.12);
  --accent-h: #818cf8;

  /* Semantic colors */
  --green: #10b981;
  --green-s: rgba(16, 185, 129, 0.12);
  --red: #ef4444;
  --red-s: rgba(239, 68, 68, 0.12);
  --amber: #f59e0b;
  --amber-s: rgba(245, 158, 11, 0.12);
  --purple: #8b5cf6;
  --purple-s: rgba(139, 92, 246, 0.12);

  /* Platform colors */
  --yt: #ff0033;
  --yt-s: rgba(255, 0, 51, 0.1);
  --tt: #00f2ea;
  --tt-s: rgba(0, 242, 234, 0.08);

  /* Card hover */
  --card-hover: #171c27;
  --input: #0f1219;

  /* Typography */
  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* Radius scale - one system, applied consistently */
  --r: 10px;
  --rl: 14px;
  --r-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

html {
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}