/* base.css — reset + design tokens for Birmingham Tech Collective v2 (developer aesthetic) */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }

/* ---- Design tokens ---- */
:root {
  /* type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-hero: clamp(2.4rem, 6vw, 4.25rem);

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --maxw: 1120px;
  --maxw-narrow: 720px;
  --maxw-measure: 760px;

  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* ---- Dark mode (default) ---- */
:root, [data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #0D0D0D;
  --color-surface-2: #121212;
  --color-surface-offset: #1A1A1A;
  --color-border: #222222;
  --color-border-strong: #333333;
  --color-text: #FFFFFF;
  --color-text-muted: #CCCCCC;
  --color-text-faint: #888888;
  --color-heading: #22D3EE;
  --color-accent: #22D3EE;
  --color-accent-bright: #22D3EE;
  --color-accent-soft: #22D3EE33;
  --color-accent-hover: #06B6D4;
  --color-on-accent: #000000;
  --color-danger: #F87171;
  color-scheme: dark;
}

/* ---- Light mode ---- */
[data-theme="light"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F4F5;
  --color-surface-offset: #E4E4E7;
  --color-border: #E4E4E7;
  --color-border-strong: #D4D4D8;
  --color-text: #18181B;
  --color-text-muted: #52525B;
  --color-text-faint: #71717A;
  --color-heading: #0E7490;
  --color-accent: #0E7490;
  --color-accent-bright: #0891B2;
  --color-accent-soft: #0891B21A;
  --color-accent-hover: #0C6478;
  --color-on-accent: #FFFFFF;
  --color-danger: #DC2626;
  color-scheme: light;
}

html { background: var(--color-bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color var(--t-base), color var(--t-base);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}