/* ═══ Aether — Base Layer ════════════════════════════════════════════════
   Reset, body defaults, typography defaults, scrollbar, focus-visible, and
   prefers-reduced-motion. Loaded after aether-tokens.css. */

/* ── Legacy variable aliases (for pages still using old variable names) ── */
:root {
  /* Surfaces */
  --surface: var(--surface-card);
  --surface2: var(--surface-sunken);
  --bg: var(--surface-page);

  /* Borders */
  --border: var(--border-default);
  --border2: var(--border-strong);

  /* Text colors */
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --text3: var(--text-muted);

  /* Brand / accent */
  --accent: var(--brand-teal-500);
  --accent-bg: var(--brand-teal-100);

  /* Status colors (legacy names) */
  --red: var(--status-danger);
  --red-bg: var(--status-danger-bg);
  --amber: var(--status-warn);
  --amber-bg: var(--status-warn-bg);
  --amber-text: var(--status-warn);
  --green: var(--status-success);
  --green-bg: var(--status-success-bg);

  /* Additional accent colors used in advice.html */
  --purple: var(--accent-lavender-500);
  --purple-bg: var(--accent-lavender-100);
  --blue: var(--brand-navy-700);
  --blue-bg: var(--brand-teal-100);
  --gold: var(--accent-orange-500);
  --gold-bg: var(--accent-orange-100);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  background: var(--surface-page);
  color: var(--text-primary);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: -0.005em;
}

a {
  color: var(--brand-teal-500);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* — Focus visible (keyboard) — applies to all interactives — */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-teal);
  border-radius: var(--radius-sm);
}

/* — Scrollbar (subtle, brand-tinted) — WebKit only; Firefox ignores — */
::-webkit-scrollbar           { width: 10px; height: 10px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--border-default); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* — Reduced motion: disable all transitions and animations — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}