/* ════════════════════════════════════════════════════════════
   design-system.css  —  tokens · reset · typography
   howard.baby / Elija Howard
════════════════════════════════════════════════════════════ */

/* ── Tokens: light mode ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:        #F7F5F2;
  --surface:   #FFFFFF;
  --surface-2: #F0ECE6;
  --surface-3: #E7E1D9;

  /* Lines */
  --line:        #DAD4CB;
  --line-subtle: #EAE5DE;

  /* Text */
  --text-1: #18130D;
  --text-2: #6A5E52;
  --text-3: #A59488;
  --text-4: #C5BAB0;

  /* Accent — warm terracotta (use sparingly) */
  --accent:        #B86840;
  --accent-subtle: #F2E7DC;
  --accent-dk:     #8A4B28;
  --accent-hover:  #A35830;

  /* Gold — milestones ONLY */
  --gold:        #B8923A;
  --gold-subtle: #F5EDD5;
  --gold-dk:     #8A6820;

  /* Sage — newborn / nature */
  --sage:        #7A9887;
  --sage-subtle: #EBF1EC;
  --sage-dk:     #4A6E5A;

  /* Slate — family / outings */
  --slate:        #6B7B8A;
  --slate-subtle: #E8EEF3;
  --slate-dk:     #3D5062;

  /* Plum — firsts */
  --plum:        #7B62AD;
  --plum-subtle: #F0EBF8;
  --plum-dk:     #5A3E8A;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(24,19,13,.06);
  --shadow-sm: 0 1px 4px rgba(24,19,13,.08);
  --shadow:    0 4px 16px rgba(24,19,13,.09);
  --shadow-md: 0 8px 28px rgba(24,19,13,.11);
  --shadow-lg: 0 16px 48px rgba(24,19,13,.14);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --t-xs:   0.6875rem; /* 11px */
  --t-sm:   0.8125rem; /* 13px */
  --t-base: 1rem;      /* 16px */
  --t-md:   1.0625rem; /* 17px */
  --t-lg:   1.25rem;   /* 20px */
  --t-xl:   1.5rem;    /* 24px */
  --t-2xl:  2rem;      /* 32px */
  --t-3xl:  2.5rem;    /* 40px */
  --t-4xl:  3.25rem;   /* 52px */
  --t-5xl:  4.5rem;    /* 72px */

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;   --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px;  --sp-7:  32px; --sp-8:  48px;
  --sp-9:  64px; --sp-10: 80px;  --sp-11: 96px;

  /* Radius */
  --r-sm: 4px;  --r: 8px;  --r-md: 12px;
  --r-lg: 18px; --r-xl: 26px; --r-full: 9999px;

  /* Transitions */
  --t-fast:   140ms ease;
  --t-base-d: 220ms ease;
  --t-slow:   360ms ease;

  /* Layout */
  --max-w:    960px;
  --max-w-sm: 680px;
  --gutter:   20px;
  --header-h: 60px;
  --nav-h:    58px;
}

/* ── Tokens: dark mode ──────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #110D09;
  --surface:   #1B1510;
  --surface-2: #231C15;
  --surface-3: #2B241B;

  --line:        #342719;
  --line-subtle: #271F16;

  --text-1: #EDE5D8;
  --text-2: #A09080;
  --text-3: #6A5C4E;
  --text-4: #42342A;

  --accent:        #D4804A;
  --accent-subtle: #2A190C;
  --accent-dk:     #E8986A;
  --accent-hover:  #E08050;

  --gold:        #D4A43C;
  --gold-subtle: #29200A;
  --gold-dk:     #E8C060;

  --sage:        #8DAF9A;
  --sage-subtle: #142019;
  --sage-dk:     #AACFBB;

  --slate:        #8FAAB8;
  --slate-subtle: #0F1E28;
  --slate-dk:     #AABFCE;

  --plum:        #B08AE0;
  --plum-subtle: #2A1E40;
  --plum-dk:     #CAA8F8;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.25);
  --shadow:    0 4px 16px rgba(0,0,0,.3);
  --shadow-md: 0 8px 28px rgba(0,0,0,.38);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.45);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg);
  transition: background var(--t-base-d), color var(--t-base-d);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Base typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
p { color: var(--text-2); line-height: 1.68; }
strong { font-weight: 600; color: var(--text-1); }
code {
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Utilities ───────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.t-1 { color: var(--text-1); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-accent { color: var(--accent); }
.display { font-family: var(--font-display); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.max-reading { max-width: 65ch; }

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0 }              to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scroll-reveal animation ─────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal]:nth-child(2) { transition-delay: 0.07s; }
[data-reveal]:nth-child(3) { transition-delay: 0.14s; }
[data-reveal]:nth-child(4) { transition-delay: 0.21s; }
[data-reveal]:nth-child(5) { transition-delay: 0.28s; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  #site-header, #mobile-nav, .filter-strip,
  .detail-back, .detail-nav-wrap, .btn,
  .home-recent-section, .recap-actions { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .memory-entry, .recap-entry { break-inside: avoid; }
}