/* ============================================================================
   ChemistryScore design system
   Built for high-school and college students: energetic surface, calm reading
   column. Every colour pair below is checked to at least WCAG AA on its own
   background. Dark mode is a first-class target — people study at night.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------ */
:root {
  /* brand */
  --ink:        #0b1020;
  --ink-2:      #151c33;
  --ink-3:      #1f2947;
  --paper:      #ffffff;
  --paper-2:    #f6f8fc;
  --paper-3:    #eaeff8;

  --cyan:       #06b6d4;
  --cyan-lo:    #22d3ee;
  --violet:     #7c3aed;
  --violet-lo:  #a855f7;
  --lime:       #65a30d;
  --lime-lo:    #a3e635;
  --amber:      #d97706;   /* conversion / study-guide accent */
  --amber-lo:   #fbbf24;
  --rose:       #e11d48;

  /* semantic */
  --bg:         var(--paper);
  --bg-soft:    var(--paper-2);
  --bg-sunk:    var(--paper-3);
  --fg:         #101828;
  --fg-muted:   #4b5565;
  --fg-faint:   #697586;
  --line:       #d8e0ee;
  --line-soft:  #e8edf6;
  --brand:      #0e7490;          /* AA on white */
  --brand-ink:  #0b5a70;
  --link:       #0e7490;
  --accent:     var(--violet);
  --sell:       #b45309;          /* AA on white for study-guide text */
  --sell-bg:    #fffbeb;
  --sell-line:  #fcd34d;

  --code-bg:    #f2f5fb;

  /* type */
  --font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1: clamp(.84rem, .81rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .97rem + .18vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.13rem + .30vw, 1.38rem);
  --step-2:  clamp(1.41rem, 1.31rem + .50vw, 1.75rem);
  --step-3:  clamp(1.68rem, 1.51rem + .80vw, 2.22rem);
  --step-4:  clamp(2.00rem, 1.74rem + 1.25vw, 2.81rem);
  --step-5:  clamp(2.38rem, 1.98rem + 1.90vw, 3.58rem);

  /* space + shape */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;  --sp-9: 6rem;
  --r-sm: 6px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .10);
  --shadow:    0 4px 6px -1px rgb(16 24 40 / .08), 0 10px 20px -6px rgb(16 24 40 / .12);
  --shadow-lg: 0 12px 24px -8px rgb(16 24 40 / .16), 0 32px 56px -20px rgb(16 24 40 / .22);

  --measure: 68ch;
  --wrap: 1200px;
  --wrap-wide: 1400px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020; --bg-soft: #121a30; --bg-sunk: #0a0f1d;
    --fg: #e8edf9; --fg-muted: #a9b4cc; --fg-faint: #8794b0;
    --line: #26314f; --line-soft: #1b2440;
    --brand: #67e8f9; --brand-ink: #a5f3fc; --link: #67e8f9;
    --accent: var(--violet-lo);
    --sell: #fcd34d; --sell-bg: #26200c; --sell-line: #7c5e10;
    --code-bg: #131c33;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow:    0 4px 8px -2px rgb(0 0 0 / .5), 0 12px 28px -10px rgb(0 0 0 / .6);
    --shadow-lg: 0 16px 32px -12px rgb(0 0 0 / .6), 0 40px 64px -24px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1020; --bg-soft: #121a30; --bg-sunk: #0a0f1d;
  --fg: #e8edf9; --fg-muted: #a9b4cc; --fg-faint: #8794b0;
  --line: #26314f; --line-soft: #1b2440;
  --brand: #67e8f9; --brand-ink: #a5f3fc; --link: #67e8f9;
  --accent: #a855f7;
  --sell: #fcd34d; --sell-bg: #26200c; --sell-line: #7c5e10;
  --code-bg: #131c33;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow:    0 4px 8px -2px rgb(0 0 0 / .5), 0 12px 28px -10px rgb(0 0 0 / .6);
  --shadow-lg: 0 16px 32px -12px rgb(0 0 0 / .6), 0 40px 64px -24px rgb(0 0 0 / .7);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;  }

/* ---- base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
img { border-radius: var(--r-sm); }

h1, h2, h3, h4 {
  line-height: 1.18; margin: 0 0 var(--sp-3);
  font-weight: 750; letter-spacing: -.021em; text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: var(--sp-7); }
h3 { font-size: var(--step-2); margin-top: var(--sp-6); }
h4 { font-size: var(--step-1); margin-top: var(--sp-5); }
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible {
  outline: 3px solid var(--violet-lo); outline-offset: 2px; border-radius: 3px;
}

sub, sup { font-size: .74em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; } sub { bottom: -.28em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2.5rem, var(--wrap-wide)); margin-inline: auto; }
.prose { width: min(100%, var(--measure)); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--violet); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r) 0; font-weight: 650;
}
.skip-link:focus { left: 0; }

/* ---- chemistry text ---------------------------------------------------- */
.formula { font-family: var(--font-mono); font-size: .95em; white-space: nowrap; }
.reagent {
  display: inline-block; padding: .1em .5em; border-radius: var(--r-sm);
  background: var(--code-bg); border: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: .86em; white-space: nowrap;
}

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__bar {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 64px; width: min(100% - 2.5rem, var(--wrap-wide)); margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 820; font-size: 1.16rem; letter-spacing: -.03em;
  color: var(--fg); text-decoration: none; flex: none;
}
.brand:hover { color: var(--fg); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__score { color: var(--brand); }

/* header search: the site is search-first, so it is reachable from every page */
.site-header__search { flex: 1 1 auto; max-width: 340px; margin-left: var(--sp-2); }
.site-header__search input { padding-block: .5rem; font-size: var(--step--1); }
.site-header__search svg { width: 16px; height: 16px; left: .85rem; }
@media (max-width: 1100px) { .site-header__search { max-width: 240px; } }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
  color: var(--fg-muted); text-decoration: none; font-weight: 580; font-size: var(--step--1);
  white-space: nowrap;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--fg); background: var(--bg-soft); }
.nav__link[aria-current="page"] { color: var(--brand); background: var(--bg-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.15rem; border-radius: var(--r-full); border: 1px solid transparent;
  font-weight: 680; font-size: var(--step--1); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: #fff; box-shadow: var(--shadow-sm);
}
.btn--primary:hover { color: #fff; box-shadow: var(--shadow); }
.btn--sell {
  background: linear-gradient(135deg, #f59e0b, #ea580c); color: #17120a;
  box-shadow: 0 2px 0 rgb(120 53 15 / .45), var(--shadow-sm); font-weight: 780;
}
.btn--sell:hover { color: #17120a; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--fg); }
.btn--lg { padding: .88rem 1.6rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: transparent; color: var(--fg-muted); cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--fg); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .theme-toggle .i-sun,
:root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    margin-left: auto; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: transparent; color: var(--fg); cursor: pointer;
  }
  .nav { display: none; margin-left: 0; width: 100%; }
  .site-header__bar { flex-wrap: wrap; padding-block: .5rem; row-gap: .5rem; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding-bottom: var(--sp-4); }
  .nav__link { padding: .7rem .5rem; font-size: var(--step-0); }
  /* the box drops to its own full-width row rather than squeezing the brand */
  .site-header__search { order: 3; flex: 1 0 100%; max-width: none; margin-left: 0; }
}

/* ---- footer ------------------------------------------------------------ */
.site-footer {
  margin-top: var(--sp-9); padding: var(--sp-8) 0 var(--sp-6);
  background: var(--bg-sunk); border-top: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.site-footer h2 { font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .09em; color: var(--fg-faint); margin: 0 0 var(--sp-3); }
.footer__grid { display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__list a { color: var(--fg-muted); text-decoration: none; }
.footer__list a:hover { color: var(--link); text-decoration: underline; }
.footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  color: var(--fg-faint);
}