/* ============================================================
   GEN CHEM INTERACTIVES: DESIGN TOKENS
   The single source of truth for color, type, and base layout.
   Change a value here and it propagates to every lesson.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* paper / ink */
  --paper:#EDF1EC; --paper-2:#E4EAE3; --paper-3:#DBE2D9; --card:#F5F8F4;
  --ink:#16201C; --ink-soft:#3A463F; --ink-mute:#6B756D;

  /* accents: ONE primary accent (vermilion). green = "correct"/positive only. */
  --accent:#D6452A; --accent-soft:#E68A77; --good:#2E7D57; --good-soft:#6FAF8F;
  --green: var(--good); --green-soft: var(--good-soft);

  /* diagram + heat-map families */
  --nucleus:#D6452A; --electron:#2E7D57; --shell:rgba(22,32,28,.35);
  --cool:#3E6FA5; --hot:#D6452A; --water:#3E6FA5;

  /* structure */
  --grid:rgba(22,32,28,.02); --grid-bold:rgba(22,32,28,.04);
  --hair:rgba(22,32,28,.16); --hair-soft:rgba(22,32,28,.09);

  /* type */
  --display:'Hanken Grotesk',system-ui,sans-serif;
  --serif:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* typography scale: single source of truth across all textbook UI and prose */
  --text-3xs: 0.5625rem; /* 9px: compact periodic table cells, sub-indices */
  --text-2xs: 0.6875rem; /* 11px: extreme micro labels, subscripts, tiny badge counters */
  --text-xs:  0.75rem;   /* 12px: metadata, badge pills, button labels, crumbs, section numbers */
  --text-sm:  0.875rem;  /* 14px: secondary UI, hints, footnotes, dropdown links, atom stats */
  --text-base:1rem;      /* 16px: standard card body, options, form inputs, list items */
  --text-md:  1.125rem;  /* 18px: lead text, callouts, prominent readouts, step buttons */
  --text-lg:  1.25rem;   /* 20px: card headers, subheadings, formula-lg */
  --text-xl:  1.5rem;    /* 24px: h3 subheads, major display readouts */
  --text-2xl: 1.875rem;  /* 30px: h2 section titles */
  --text-3xl: 2.25rem;   /* 36px: h1 lesson titles */
  --text-4xl: 3rem;      /* 48px: display hero titles */
  --text-reading: 1.375rem; /* 22px: Spectral editorial longform reading paragraphs */

  /* rhythm */
  --gutter:clamp(1.25rem,5vw,4rem); --beat:clamp(2.75rem,8vh,6rem); --prose:52rem;

  /* figure tiers: width chosen by how much information a figure carries,
     never a raw pixel value. See TODO.md §1.1. */
  --fig-sm:24rem; --fig-md:34rem; --fig-full:var(--prose); --fig-wide:68rem;

  /* aliases & compatibility guards to prevent token drift */
  --sans: var(--display);
  --font-sans: var(--display);
  --font-body: var(--serif);
  --font-chem: var(--mono);
  --font-ui: var(--display);
  --card-bg: var(--card);
  --paper-card: var(--card);
  --paper-alt: var(--paper-2);
  --border: var(--hair);
  --border-soft: var(--hair-soft);
  --hair-strong: var(--hair);
  --ink-main: var(--ink);
  --accent-1: var(--accent);
  --warn: #D9822B;
  --warn-soft: #F3B05C;
  --bad: var(--accent);
  --bad-soft: var(--accent-soft);
  --shadow-sm: 0 2px 6px rgba(22,32,28,.06);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* diagram geometry tokens: shared radius/stroke/type scale for in-SVG
     diagrams, in SVG user units. Defaults are the most-common existing
     value per the DIAGRAM_STANDARDIZATION.md Phase 0 harvest, chosen to
     minimize visual churn once figures adopt them (Phase 3). Diagram
     COLOR already routes through the existing palette (--electron,
     --nucleus, --ink-mute, --accent) via the .d-* classes in
     components.css (no separate --dia-* color tokens; see
     DIAGRAM_CONTRACT.md). */
  --dia-r-particle:2; --dia-r-atom-sm:5; --dia-r-atom:7.5;
  --dia-stroke:1; --dia-stroke-bond:1.2;
  --dia-atom-size:22px; --dia-header-size:14px;
  --dia-label-size:12px; --dia-caption-size:10px;
}

:root.dark {
  --paper:#131A17; --paper-2:#18211D; --paper-3:#1F2A25; --card:#1B2420;
  --ink:#E7EDE6; --ink-soft:#C3CCC2; --ink-mute:#8A948B;
  --accent:#F26B4E; --accent-soft:#9E4636; --good:#5FB088; --good-soft:#3A6B53;
  --green: var(--good); --green-soft: var(--good-soft);
  --nucleus:#F26B4E; --electron:#5FB088; --shell:rgba(231,237,230,.32);
  --cool:#6B9BD0; --hot:#F26B4E; --water:#6B9BD0;
  --grid:rgba(231,237,230,.012); --grid-bold:rgba(231,237,230,.025);
  --hair:rgba(231,237,230,.16); --hair-soft:rgba(231,237,230,.08);

  /* aliases & compatibility guards in dark mode */
  --sans: var(--display);
  --font-sans: var(--display);
  --font-body: var(--serif);
  --font-chem: var(--mono);
  --font-ui: var(--display);
  --card-bg: var(--card);
  --paper-card: var(--card);
  --paper-alt: var(--paper-2);
  --border: var(--hair);
  --border-soft: var(--hair-soft);
  --hair-strong: var(--hair);
  --ink-main: var(--ink);
  --accent-1: var(--accent);
  --warn: #EAA847;
  --warn-soft: #9E6B20;
  --bad: var(--accent);
  --bad-soft: var(--accent-soft);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.25);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:var(--serif); font-size:var(--text-reading); line-height:1.62; color:var(--ink);
  font-feature-settings:"lnum" 1,"tnum" 1;          /* lining + tabular figures */
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px,26px 26px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}

h1,h2,h3,h4{font-family:var(--display);line-height:1.04;letter-spacing:-0.02em;color:var(--ink);font-weight:800;}
h1{font-size:clamp(var(--text-3xl),7vw,4.7rem);}
h2{font-size:clamp(var(--text-2xl),4.2vw,3rem);font-weight:700;}
h3{font-size:clamp(var(--text-lg),2.3vw,1.7rem);font-weight:700;}
h4{font-size:var(--text-md);font-weight:700;}
p{max-width:var(--prose);}
em{font-style:italic;color:var(--accent);}
strong{font-weight:600;color:var(--ink);}
abbr{text-decoration:none;}
.chem{font-family:var(--mono);}
sub{font-size:.7em;}

.label{font-family:var(--mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);}
.label-accent{color:var(--accent);}
.lede{font-size:clamp(var(--text-md),2vw,var(--text-reading));line-height:1.5;color:var(--ink-soft);}

/* Accessibility / Dyslexia Mode Overrides */
body.accessibility-mode {
  font-family: 'Verdana', 'Segoe UI', sans-serif !important;
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
}

body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3,
body.accessibility-mode h4 {
  letter-spacing: 0.08em !important;
}

body.accessibility-mode p,
body.accessibility-mode li,
body.accessibility-mode span {
  font-weight: 500 !important;
}