/*
 * 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;
}

/*
 * Light theme.
 * :root stays the dark default. Light tokens apply when the visitor's OS prefers
 * light AND no explicit override is set, or when data-theme="light" is forced.
 * A forced dark override needs no block: data-theme="dark" simply stops the
 * :not([data-theme]) light rule from matching, so the :root dark defaults win.
 * Keep this list in sync with the light column in DESIGN.md.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f6f7f9;
    --card: #ffffff;
    --surface: #eaedf3;
    --input: #ffffff;
    --card-hover: #f0f2f6;

    --border: #e4e7ee;
    --border-h: #cfd5e0;

    --t1: #1a1f2b;
    --t2: #5b6478;
    --t3: #8a93a6;
    --t4: #2a3145;

    --accent: #4f46e5;
    --accent-s: rgba(79, 70, 229, 0.1);
    --accent-h: #4338ca;

    --green: #047857;
    --red: #dc2626;
    --amber: #b45309;
    --purple: #7c3aed;

    --yt: #e11d2e;
    --tt: #0e8f88;
  }
}

:root[data-theme="light"] {
  --bg: #f6f7f9;
  --card: #ffffff;
  --surface: #eaedf3;
  --input: #ffffff;
  --card-hover: #f0f2f6;

  --border: #e4e7ee;
  --border-h: #cfd5e0;

  --t1: #1a1f2b;
  --t2: #5b6478;
  --t3: #8a93a6;
  --t4: #2a3145;

  --accent: #4f46e5;
  --accent-s: rgba(79, 70, 229, 0.1);
  --accent-h: #4338ca;

  --green: #047857;
  --red: #dc2626;
  --amber: #b45309;
  --purple: #7c3aed;

  --yt: #e11d2e;
  --tt: #0e8f88;
}

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