/* ============================================================
   The Tee Family House — base.css
   Design tokens + shared shells. THE VISUAL CONTRACT.
   Owned by the brain — builders read, never edit.
   Arc: the page travels from night (the street) to cream (home).
   ============================================================ */

:root {
  /* Night chapter (hero, moment, stories opening, footer) */
  --night: #120d10;
  --night-2: #1c1418;
  --night-3: #241a1f;
  --text-on-dark: #f7f0f3;
  --muted-on-dark: #a9989f;
  --hairline-dark: rgba(244, 143, 177, 0.16);

  /* Home chapter (family, donate, petition, follow) */
  --cream: #faf4ec;
  --cream-2: #f3eae0;
  --card: #ffffff;
  --ink: #2c2126;
  --ink-soft: #5c4e55;
  --muted-on-light: #8b7a81;
  --hairline-light: rgba(44, 33, 38, 0.1);

  /* The single accent — the brand's pink, untouched + deepened for CTAs */
  --pink: #f48fb1;
  --pink-deep: #d9538a;
  --pink-soft: #f9e9ee;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type */
  --font-main: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Amiri', 'Times New Roman', serif;      /* accent word, AR */
  --font-accent-en: 'Fraunces', Georgia, serif;          /* accent word, EN */
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;       /* polaroid captions */

  /* Layout */
  --container: 1180px;
  --radius: 20px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-main);
  background: var(--night);
  color: var(--text-on-dark);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* Arabic headlines need generous leading (ascenders clip at tight line-height) */
h1, h2, h3 { font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
html[lang='en'] h1, html[lang='en'] h2 { letter-spacing: -0.02em; }

/* ---------- Zones (the dark→light journey) ---------- */
.zone-dark { background: var(--night); color: var(--text-on-dark); }
.zone-light { background: var(--cream); color: var(--ink); }
/* The bridge: stories end fades from night into cream — the page "warms up" */
.zone-bridge { background: linear-gradient(to bottom, var(--night) 0%, #4a2f3c 55%, #b58a95 80%, var(--cream) 100%); color: var(--text-on-dark); }

/* ---------- Shells ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section { padding-block: clamp(72px, 12vh, 140px); position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.22em;
  color: var(--pink); text-transform: uppercase;
}
.eyebrow::before { content: ''; inline-size: 28px; block-size: 1px; background: var(--pink); opacity: 0.6; }

.h2 { font-size: clamp(1.7rem, 4.2vw, 3rem); font-weight: 600; margin-block: 14px 18px; }

/* The single italic-serif accent word inside a sans headline */
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 700; color: var(--pink); }
html[lang='en'] .accent { font-family: var(--font-accent-en); font-weight: 500; }

.lead { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--muted-on-dark); max-width: 62ch; }
.zone-light .lead, .zone-light p { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; font-weight: 500; font-size: 1rem;
  transition: transform 0.2s var(--ease-soft), box-shadow 0.3s var(--ease-soft), background 0.3s;
  will-change: transform;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--pink-deep), var(--pink));
  color: #fff;
  box-shadow: 0 2px 6px rgba(217, 83, 138, 0.35), 0 10px 28px rgba(217, 83, 138, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(217, 83, 138, 0.4), 0 16px 40px rgba(217, 83, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--hairline-dark); color: var(--text-on-dark); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }
.zone-light .btn-ghost { border-color: var(--hairline-light); color: var(--ink); background: rgba(255, 255, 255, 0.5); }
.zone-light .btn-ghost:hover { border-color: var(--pink-deep); color: var(--pink-deep); }

/* ---------- Glass chip ---------- */
.glass-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-dark);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  font-size: 0.9rem;
}

/* ---------- Photo dignity treatment (dark zones) ---------- */
.photo-frame { border-radius: var(--radius); overflow: hidden; position: relative; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) sepia(0.08) brightness(1.02); }
.photo-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; border: 1px solid var(--hairline-dark);
  background: radial-gradient(120% 90% at 50% 10%, rgba(244, 143, 177, 0.08), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ---------- Reveal contract ----------
   Elements tagged data-reveal are entrance-animated by js/motion.js (blur-rise).
   Hidden ONLY when JS is present (html.js) so a no-JS visitor still sees content. */
html.js [data-reveal] { opacity: 0; }
html.js.reduce-motion [data-reveal] { opacity: 1; }

/* ---------- Reduced motion ----------
   Keyed to the html.reduce-motion class (set by js/motion.js only for
   ?motion=off), NOT to the OS media query — the owner wants the full
   experience for every visitor; ?motion=off stays the explicit opt-out. */
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }

/* ---------- Selection ---------- */
::selection { background: var(--pink); color: var(--night); }