/* Fintech Frontiers — shared site CSS (v0.1 stub)
   Source of truth: course_plan.md §4, R2 §4 visual spec.
   Design tokens only. Component styles live in module-XX/ overrides. */

:root {
  /* Color tokens — light mode */
  --bg-base: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-muted: #F4F4F5;
  --border-base: #E4E4E7;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #A1A1AA;
  --accent: #10B981;
  /* AA-legible accent for small TEXT on the light surface: #10B981 is only ~2.5:1
     on white and fails WCAG 1.4.3. #047857 is ~5.5:1. This token flips back to
     #10B981 in dark mode (where #10B981 is already ~7:1). Use it for accent-colored
     TEXT; keep --accent for icons, borders, backgrounds, and gradients. */
  --accent-strong: #047857;
  --accent-secondary: #14B8A6;
  --accent-gradient: linear-gradient(135deg, #10B981, #14B8A6);
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
  --text-base: 1rem;
  --leading-relaxed: 1.625;

  /* Spacing */
  --section-py: 6rem;
  --container-max: 64rem; /* max-w-4xl reading pages */
  --prose-max: 65ch;

  /* Radii */
  --radius-card: 1rem;

  /* Motion */
  --transition-default: 200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-strong: #10B981; /* dark surface: #10B981 is ~7:1 as text — AA */
    --bg-base: #09090B;
    --bg-surface: #18181B;
    --bg-muted: #27272A;
    --border-base: #3F3F46;
    --text-primary: #FAFAFA;
    --text-secondary: #A1A1AA;
    --text-tertiary: #71717A;
  }
}

:root[data-theme="dark"] {
  --accent-strong: #10B981;
  --bg-base: #09090B;
  --bg-surface: #18181B;
  --bg-muted: #27272A;
  --border-base: #3F3F46;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
}

:root[data-theme="light"] {
  --accent-strong: #047857;
  --bg-base: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-muted: #F4F4F5;
  --border-base: #E4E4E7;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #A1A1AA;
}

/* Reset minimal — Tailwind handles most of it when imported */
html { color-scheme: light dark; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-default), color var(--transition-default);
}

/* Focus-visible: emerald ring for accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Reading prose constraint */
.prose-narrow { max-width: var(--prose-max); }

/* Card primitive */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}