/* ============================================================
   BASE.CSS — Reset + Tokens
   The Hope to Heal
   ============================================================ */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.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-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;
  --radius-xl:1rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
  --font-display:'Instrument Serif','Georgia',serif;
  --font-body:'Satoshi','Inter',sans-serif;
}

:root,[data-theme="light"]{
  --color-bg:#f8f9fa;--color-surface:#ffffff;--color-surface-2:#f1f5f9;
  --color-surface-offset:#e8edf3;--color-divider:#dde3ec;--color-border:#ccd3de;
  --color-text:#0f172a;--color-text-muted:#475569;--color-text-faint:#94a3b8;
  --color-text-inverse:#f8fafc;
  --color-primary:#0e7490;--color-primary-hover:#0c5f78;
  --color-primary-active:#0a4860;--color-primary-highlight:#cffafe;
  --color-navy:#0f2855;--color-navy-light:#1e3a6e;
  --color-success:#15803d;--color-success-highlight:#dcfce7;
  --color-warning:#b45309;--color-warning-highlight:#fef3c7;
  --shadow-sm:0 1px 3px rgba(15,23,42,0.06);
  --shadow-md:0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg:0 12px 40px rgba(15,23,42,0.12);
}

[data-theme="dark"]{
  --color-bg:#0c1220;--color-surface:#111827;--color-surface-2:#1a2332;
  --color-surface-offset:#1e2a3d;--color-divider:#243044;--color-border:#2d3f57;
  --color-text:#e2e8f0;--color-text-muted:#94a3b8;--color-text-faint:#4a5568;
  --color-text-inverse:#0f172a;
  --color-primary:#38bdf8;--color-primary-hover:#7dd3fc;
  --color-primary-active:#bae6fd;--color-primary-highlight:#0c2a3d;
  --color-navy:#93c5fd;--color-navy-light:#60a5fa;
  --color-success:#4ade80;--color-success-highlight:#052e16;
  --color-warning:#fbbf24;--color-warning-highlight:#1c1400;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.5);
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0c1220;--color-surface:#111827;--color-surface-2:#1a2332;
    --color-surface-offset:#1e2a3d;--color-divider:#243044;--color-border:#2d3f57;
    --color-text:#e2e8f0;--color-text-muted:#94a3b8;--color-text-faint:#4a5568;
    --color-text-inverse:#0f172a;
    --color-primary:#38bdf8;--color-primary-hover:#7dd3fc;
    --color-primary-active:#bae6fd;--color-primary-highlight:#0c2a3d;
    --color-navy:#93c5fd;--color-success:#4ade80;--color-warning:#fbbf24;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:0 12px 40px rgba(0,0,0,0.5);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  scroll-behavior:smooth;scroll-padding-top:var(--space-20);}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg);
  transition:background-color 0.3s ease,color 0.3s ease;}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}
ul[role="list"],ol[role="list"]{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15;font-family:var(--font-display);}
p,li,figcaption{text-wrap:pretty;max-width:72ch;}
::selection{background:var(--color-primary-highlight);color:var(--color-text);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;
    animation-iteration-count:1!important;transition-duration:0.01ms!important;
    scroll-behavior:auto!important;}}
button{cursor:pointer;background:none;border:none;}
a,button,[role="button"]{transition:color var(--transition-interactive),
  background var(--transition-interactive),border-color var(--transition-interactive),
  box-shadow var(--transition-interactive),opacity var(--transition-interactive);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}