/* Perfect Dose — Design Tokens
 *
 * Single source of truth for the 6-token palette, dark-mode inversions,
 * reduced-motion overrides, and a global visible focus state.
 * Loaded alphabetically AFTER calculator.css / theme.css / legal.css /
 * blog.css, so its :root rules override any duplicates declared by them.
 *
 * Roles only — palette is the deciding surface here. Type roles
 * (Display / Body) are set in their per-component stylesheets.
 */

:root {
  /* ── 6 palette tokens (per design plan) ─────────────────────── */
  --ink:            #0E1F1D;
  --paper:          #F5F2EC;
  --brand-primary:  #0A5550;
  --brand-accent:   #00BFA5;
  --warn:           #B85C00;
  --line:           #D8D2C5;

  /* ── Aliases that derive from the 6 ─────────────────────────── */
  --bg:             var(--paper);
  --fg:             var(--ink);
  --accent:         var(--brand-accent);
  --text-muted:     rgba(14, 31, 31, 0.62);
  --card:           #FFFFFF;
  --accent-light:   color-mix(in srgb, var(--brand-accent) 12%, var(--paper));
  --danger:         var(--warn);
  --danger-bg:      color-mix(in srgb, var(--warn) 8%, var(--paper));

  /* ── Base size for the calculator (16px baseline so min-16px body
        text + min-16px input copy hit cleanly without overrides) ─ */
  font-size: 16px;
}

/* Dark mode — respect system preference. Invert ink/paper, desaturate
   the warning amber for legibility on a dark surface, keep brand teals.
   Brand colors stay the same so the dose-numeral accent reads; the
   background flips so parents in a dark room see it cleanly. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:           #F5F2EC;
    --paper:         #0E1F1D;
    --line:          #2A3735;
    --card:          #152422;
    --text-muted:    rgba(245, 242, 236, 0.65);
    --warn:          #D97706;

    /* Recompose the derived aliases so they reflect the new paper */
    --bg:            var(--paper);
    --fg:            var(--ink);
    --accent-light:  color-mix(in srgb, var(--brand-accent) 16%, var(--paper));
    --danger-bg:     color-mix(in srgb, var(--warn) 14%, var(--paper));
  }
}

/* a11y fix: visible keyboard focus ring on every interactive element.
   Plan calls for this as a single global rule so every component
   inherits it. Use :focus-visible (not :focus) so mouse clicks do not
   paint the outline. */
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion: kill animations + transitions per plan. */
@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;
  }
}