/*
 * Design tokens — the single source of truth for the app's palette, radii,
 * shadows and motion.
 *
 * Every page used to declare its own :root block. Comparing them showed one
 * coherent palette that had drifted by a digit or two through copy-paste:
 * --ink appeared as #17323a on eleven pages but also #17343a and #172f36;
 * --muted had six near-identical variants; --line differed only in alpha
 * (.11 / .12 / .13); --card was written both #fff and #ffffff. Those are
 * accidents, and they are unified here.
 *
 * A few pages are deliberately themed differently — formulas.html uses a warm
 * parchment palette, safety.html a warm orange one, calculator.html a cooler
 * teal. That is real design intent, not drift. Those pages keep a short :root
 * override listing only the handful of tokens they genuinely change, instead
 * of restating the whole palette.
 */

:root {
  color-scheme: light;

  /* Surfaces and text */
  --ink: #17323a;
  --ink-soft: #38515a;
  --muted: #5e6f74; /* AA: >=4.7:1 on the app's tinted card backgrounds */
  --card: #ffffff;
  --paper: #edf3f3;
  --bg: #edf4f4;
  --bg-soft: #f8fbfa;
  --line: rgba(23, 50, 58, .12);
  --line-strong: rgba(23, 50, 58, .18);

  /* Brand + subject identity. Both subjects were already unanimous across
     every page that declared them; they are the app's strongest colours. */
  --accent: #176f7d;
  --accent-deep: #155865;
  --accent-soft: #d9eef1;
  --theory: #168196;
  --theory-soft: #e7f4f6;
  --safety: #9b443f;
  --safety-soft: #f8ecea;

  /* Status */
  --good: #276749;
  --warn: #8b5d17;
  --bad: #a33f3b;

  /* Shape and depth. Ten different --shadow values existed across the pages;
     these two cover every real use. */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-sm: 0 7px 20px rgba(23, 50, 58, .07);
  --shadow: 0 14px 34px rgba(23, 50, 58, .09);
  --shadow-md: 0 16px 38px rgba(23, 50, 58, .11);

  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Aliases kept so feature-theme.css and the three pages already built on it
     resolve to the same values as everything else. */
  --feature-ink: var(--ink);
  --feature-ink-soft: var(--ink-soft);
  --feature-muted: var(--muted);
  --feature-bg: #eef4f3;
  --feature-bg-soft: var(--bg-soft);
  --feature-card: var(--card);
  --feature-line: var(--line);
  --feature-line-strong: var(--line-strong);
  --feature-theory: var(--theory);
  --feature-theory-soft: var(--theory-soft);
  --feature-safety: var(--safety);
  --feature-safety-soft: var(--safety-soft);
  --feature-accent: var(--accent);
  --feature-good: #2e7956;
  --feature-warn: #ad7214;
  --feature-bad: #a33f3f;
  --feature-radius-sm: var(--radius-sm);
  --feature-radius-md: var(--radius-md);
  --feature-radius-lg: var(--radius-lg);
  --feature-shadow-sm: var(--shadow-sm);
  --feature-shadow-md: var(--shadow-md);
  --feature-ease: var(--ease);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Author display rules (e.g. img.visual{display:block}) silently beat the
   UA's [hidden] rule — on iOS an empty hidden <img> then renders its alt
   text as a ghost pill. The attribute must always win. */
[hidden] {
  display: none !important;
}

/* Smoother transitions (Build 49): a gentle opacity fade-in when a page loads,
   so navigating between screens feels continuous instead of snapping. Opacity
   only — no transform — so it can never shift layout or affect the exam pages
   (which don't load design-tokens). Fully disabled for anyone who prefers
   reduced motion or has chosen the comfort "calm" motion setting. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-comfort-motion="calm"]) body {
    animation: mgrPageIn 0.26s ease-out both;
  }
}
@keyframes mgrPageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Readability (Build 49): crisper text for long study sessions and tired eyes,
   with zero layout impact. Users who need larger text still have the comfort
   "large" scale + "roomy" spacing on top of this. */
body {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Interactive elements ease their pressed/hover state instead of snapping.
   Scoped to elements that opt in with the shared token classes so it never
   fights a page's own :active transform. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-comfort-motion="calm"]) :where(.btn, .chip, .card) {
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  }
}