@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

:root {
  /* ── Backgrounds ── */
  --color-bg:              #F7F5F0;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F0EDE6;
  --color-surface-3:       #E8E4DC;
  --color-surface-4:       #DED9CF;

  /* ── Borders ── */
  --color-border:          #D8D4CC;
  --color-border-dark:     #C4BFB4;
  --color-border-bright:   #A8A298;

  /* ── Text ── */
  --color-text-primary:    #1A1714;
  --color-text-secondary:  #514C46;
  --color-text-muted:      #908880;
  --color-text-tertiary:   #C0B8B0;

  /* ── Macro accent (vivid blue) ── */
  --color-macro-primary:   #2563EB;
  --color-macro-dark:      #1D4ED8;
  --color-macro-light:     #EFF6FF;
  --color-macro-mid:       #BFDBFE;
  --color-macro-border:    #93C5FD;

  /* ── Micro accent (teal) ── */
  --color-micro-primary:   #0D9488;
  --color-micro-dark:      #0F766E;
  --color-micro-light:     #F0FDFA;
  --color-micro-mid:       #99F6E4;
  --color-micro-border:    #5EEAD4;

  /* ── Semantic ── */
  --color-success:         #16A34A;
  --color-success-light:   #F0FDF4;
  --color-success-border:  #86EFAC;
  --color-error:           #DC2626;
  --color-error-light:     #FEF2F2;
  --color-error-border:    #FCA5A5;
  --color-warning:         #D97706;
  --color-warning-light:   #FFFBEB;
  --color-warning-border:  #FCD34D;

  /* ── Diagram palette ── */
  --color-demand:          #2563EB;
  --color-supply:          #16A34A;
  --color-ad:              #2563EB;
  --color-as-short:        #16A34A;
  --color-as-long:         #7C3AED;
  --color-equilibrium:     #DC2626;
  --color-shift-arrow:     #D97706;
  --color-diagram-bg:      #FAFAF8;
  --color-diagram-grid:    #E8E4DC;

  /* ── Typography ── */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ── Type scale ── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   2.75rem;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Border radius ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(20,18,16,0.04);
  --shadow-sm:    0 1px 4px rgba(20,18,16,0.06);
  --shadow-md:    0 3px 10px rgba(20,18,16,0.07);
  --shadow-lg:    0 6px 20px rgba(20,18,16,0.08);
  --shadow-xl:    0 12px 32px rgba(20,18,16,0.10);
  --shadow-card:  0 1px 3px rgba(20,18,16,0.06);

  /* ── Transitions ── */
  --transition-fast:  110ms ease;
  --transition-base:  180ms ease;
  --transition-slow:  300ms ease;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--color-macro-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -999px;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-macro-primary);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}
.skip-link:focus { top: var(--space-4); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════
   DARK MODE
══════════════════════════════════════ */
html[data-theme="dark"] {
  --color-bg:              #141210;
  --color-surface:         #1E1C18;
  --color-surface-2:       #28261F;
  --color-surface-3:       #322F28;
  --color-surface-4:       #3C3830;
  --color-border:          #38342C;
  --color-border-dark:     #4A4640;
  --color-border-bright:   #66605A;
  --color-text-primary:    #F2EDE6;
  --color-text-secondary:  #B8B0A6;
  --color-text-muted:      #847E78;
  --color-text-tertiary:   #605C58;
  --color-macro-primary:   #60A5FA;
  --color-macro-dark:      #93C5FD;
  --color-macro-light:     #172554;
  --color-macro-mid:       #1E3A8A;
  --color-macro-border:    #1D4ED8;
  --color-micro-primary:   #2DD4BF;
  --color-micro-dark:      #5EEAD4;
  --color-micro-light:     #042F2E;
  --color-micro-mid:       #134E4A;
  --color-micro-border:    #0F766E;
  --color-diagram-bg:      #1A1814;
  --color-diagram-grid:    #28261F;
}

html[data-theme="dark"] .site-header {
  background: #1A1814 !important;
  border-bottom-color: #38342C !important;
}
html[data-theme="dark"] .hero {
  background: #1A1814 !important;
  border-bottom-color: #38342C !important;
}
html[data-theme="dark"] .site-footer {
  background: #141210 !important;
  border-top-color: #38342C !important;
}
html[data-theme="dark"] .course-split,
html[data-theme="dark"] .formula-card,
html[data-theme="dark"] .notes-card,
html[data-theme="dark"] .countdown-card,
html[data-theme="dark"] .unit-card {
  background: #1E1C18 !important;
  border-color: #38342C !important;
}
html[data-theme="dark"] .info-strip {
  background: #1A1814 !important;
  border-color: #38342C !important;
}
html[data-theme="dark"] .notes-intro__tag,
html[data-theme="dark"] .formulas-intro__note {
  background: #28261F !important;
  border-color: #4A4640 !important;
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--space-1);
}
.theme-toggle:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}