/* ============================================================
   base.css — reset + tokens
   Eusomnia 7-OH Clinical Resource
   ============================================================ */

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

html{
  -moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  hanging-punctuation:first last;
  scroll-padding-top:calc(var(--space-20) + var(--space-4));
}
@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{
  min-height:100dvh;line-height:1.65;
  font-family:var(--font-body,sans-serif);
  font-size:var(--text-base);
  color:var(--color-text);
  background-color:var(--color-bg);
  overflow-x:hidden;
}

img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
p,h1,h2,h3,h4,h5,h6,li{overflow-wrap:break-word}
a{color:inherit}
ul,ol{list-style:none}

:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:2px}

::selection{background:var(--color-primary);color:var(--color-bg)}

/* ---------- TOKENS ---------- */
:root{
  /* type scale */
  --text-xs:clamp(0.75rem,0.72rem + 0.15vw,0.8125rem);
  --text-sm:clamp(0.875rem,0.84rem + 0.18vw,0.9375rem);
  --text-base:clamp(1rem,0.97rem + 0.16vw,1.0625rem);
  --text-lg:clamp(1.125rem,1.04rem + 0.42vw,1.375rem);
  --text-xl:clamp(1.5rem,1.24rem + 1.05vw,2.125rem);
  --text-2xl:clamp(2rem,1.4rem + 2.4vw,3.25rem);
  --text-3xl:clamp(2.25rem,1.3rem + 3vw,3.625rem);

  /* spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* radius */
  --radius-sm:3px;--radius-md:5px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;

  /* widths */
  --content-narrow:640px;
  --content-prose:720px;
  --content-default:1000px;
  --content-wide:1240px;

  --transition:180ms cubic-bezier(.16,1,.3,1);

  --font-display:'Newsreader',Georgia,serif;
  --font-body:'Inter Tight','Helvetica Neue',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- DARK (default art direction) ---------- */
html[data-theme='dark']{
  --color-bg:#0A0C10;
  --color-surface:#0F131A;
  --color-surface-2:#151A23;
  --color-surface-3:#1B212B;
  --color-divider:#1A202A;
  --color-border:#252C38;
  --color-border-strong:#37404F;

  --color-text:#E4E7EC;
  --color-text-muted:#98A2B1;
  --color-text-faint:#6A7382;
  --color-text-inverse:#0A0C10;

  --color-primary:#7FA9E8;
  --color-primary-hover:#A2C3F2;
  --color-primary-dim:#3E5A82;
  --color-primary-wash:#121A26;

  --color-alert:#E8705A;
  --color-alert-wash:#20130F;
  --color-caution:#DFA84E;
  --color-caution-wash:#1D1710;
  --color-success:#6FBF95;
  --color-success-wash:#0F1A15;

  --shadow-sm:0 1px 2px rgb(0 0 0/.5);
  --shadow-md:0 6px 20px rgb(0 0 0/.45);
  --shadow-lg:0 18px 48px rgb(0 0 0/.55);

  --grid-line:rgb(255 255 255/.045);
}

/* ---------- LIGHT ---------- */
:root,[data-theme='light']{
  --color-bg:#FAF9F6;
  --color-surface:#FFFFFF;
  --color-surface-2:#F3F1EC;
  --color-surface-3:#EAE7E0;
  --color-divider:#E4E1DA;
  --color-border:#D9D5CC;
  --color-border-strong:#B9B4A8;

  --color-text:#12161D;
  --color-text-muted:#585F6C;
  --color-text-faint:#8A909B;
  --color-text-inverse:#FAF9F6;

  --color-primary:#1C4C8C;
  --color-primary-hover:#123A6E;
  --color-primary-dim:#8FA8C9;
  --color-primary-wash:#EDF2F9;

  --color-alert:#A93A22;
  --color-alert-wash:#FBEFEC;
  --color-caution:#8A6018;
  --color-caution-wash:#FAF3E4;
  --color-success:#2F6B4A;
  --color-success-wash:#EDF5F0;

  --shadow-sm:0 1px 2px rgb(20 24 30/.06);
  --shadow-md:0 4px 16px rgb(20 24 30/.08);
  --shadow-lg:0 16px 44px rgb(20 24 30/.12);

  --grid-line:rgb(18 22 29/.05);
}