/* Better Skills Academy — design tokens */
:root {
  --brand-navy:  #0F1F3D;
  --brand-amber: #F59E0B;
  --brand-cream: #FDFAF3;
  --brand-navy-2: #16294F;

  --ink:     #22252A;
  --bg:      #FDFAF3;
  --card:    #FFFFFF;
  --border:  #E7DFCC;
  --muted:   #6B7280;

  --wrong:   #C0392B;
  --right:   #16A34A;
  --wrongbg: #FBEAE8;
  --rightbg: #E8F6EE;

  --radius:  12px;
  --shadow-sm: 0 1px 3px rgba(15,31,61,.08);
  --shadow-md: 0 4px 14px rgba(15,31,61,.12);
  --shadow-lg: 0 12px 40px rgba(15,31,61,.20);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; letter-spacing: -.005em; }
a { color: var(--brand-navy); }
img, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}