/* ============================================================
   SALT Families — web app
   Design language (from the vision doc):
   deep navy · refined serif display + clean sans body
   teal = individual · gold = family · purple = faith · rose = stress/repair
   Three themes: Dark (showcase) · Light · Sepia
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* track / layer accents — shared hues, tuned per theme below */
  --teal:   #1f9c97;   /* individual */
  --gold:   #c79a3a;   /* family */
  --purple: #8a72c9;   /* faith */
  --rose:   #d0748a;   /* stress & repair */

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 28px -12px rgba(8,20,34,.35);
  --shadow-lg: 0 24px 60px -24px rgba(8,20,34,.55);

  --ts: 1;            /* text-size multiplier, set by JS */
  --maxw: 1180px;
}

/* ---------- DARK (primary showcase — deep navy) ---------- */
[data-theme="dark"] {
  --bg:        #081320;
  --bg-grad:   radial-gradient(1300px 760px at 80% -12%, #173a52 0%, rgba(23,58,82,0) 56%), radial-gradient(1000px 640px at -6% 108%, #1a2c4e 0%, rgba(26,44,78,0) 60%), #081320;
  --surface:   #0e2032;
  --surface-2: #15293d;
  --surface-3: #1e344c;
  --line:      rgba(176,205,238,.13);
  --line-2:    rgba(176,205,238,.24);
  --text:      #ecf3fb;
  --text-2:    #aec1d6;
  --text-3:    #7790a9;
  --teal:   #38c0b4;
  --gold:   #e4b855;
  --purple: #ab8df4;
  --rose:   #ee8ca3;
  --on-accent:#081320;
  --placeholder: rgba(176,205,238,.05);
}
/* ---------- DUSK (indigo / plum night) ---------- */
[data-theme="dusk"] {
  --bg:        #120f1d;
  --bg-grad:   radial-gradient(1300px 760px at 82% -14%, #34234d 0%, rgba(52,35,77,0) 56%), radial-gradient(1000px 640px at -6% 110%, #1c2547 0%, rgba(28,37,71,0) 60%), #120f1d;
  --surface:   #1a1529;
  --surface-2: #221b34;
  --surface-3: #2d2443;
  --line:      rgba(206,190,238,.13);
  --line-2:    rgba(206,190,238,.24);
  --text:      #f1ecfa;
  --text-2:    #c0b3d6;
  --text-3:    #8e80a9;
  --teal:   #46c2c9;
  --gold:   #e6b65f;
  --purple: #bb98fb;
  --rose:   #f091b4;
  --on-accent:#120f1d;
  --placeholder: rgba(206,190,238,.05);
}
/* ---------- LIGHT (clean daylight) ---------- */
[data-theme="light"] {
  --bg:        #eceff4;
  --bg-grad:   radial-gradient(1200px 720px at 84% -14%, #dfe7f3 0%, rgba(223,231,243,0) 60%), radial-gradient(900px 600px at -4% 108%, #e7ecf2 0%, rgba(231,236,242,0) 60%), #eceff4;
  --surface:   #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e7edf5;
  --line:      rgba(18,42,72,.10);
  --line-2:    rgba(18,42,72,.17);
  --text:      #112033;
  --text-2:    #46596f;
  --text-3:    #72869d;
  --teal:   #0d7a78;
  --gold:   #9c7417;
  --purple: #6a51b4;
  --rose:   #bc536e;
  --on-accent:#ffffff;
  --placeholder: rgba(18,42,72,.04);
}
/* ---------- SEPIA (warm paper) ---------- */
[data-theme="sepia"] {
  --bg:        #ece1cd;
  --bg-grad:   radial-gradient(1200px 720px at 84% -14%, #f3ebda 0%, rgba(243,235,218,0) 60%), radial-gradient(900px 600px at -4% 110%, #ecdfc6 0%, rgba(236,223,198,0) 60%), #ece1cd;
  --surface:   #fbf4e6;
  --surface-2: #f4ead4;
  --surface-3: #ead9bd;
  --line:      rgba(92,66,34,.17);
  --line-2:    rgba(92,66,34,.29);
  --text:      #382819;
  --text-2:    #6a543c;
  --text-3:    #927a58;
  --teal:   #197a6c;
  --gold:   #976f12;
  --purple: #74539a;
  --rose:   #ad4f63;
  --on-accent:#fbf4e6;
  --placeholder: rgba(92,66,34,.05);
}

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

html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg-grad) fixed;
  color: var(--text);
  font-size: calc(16px * var(--ts));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
#root { height: 100vh; }

::selection { background: color-mix(in oklab, var(--teal) 35%, transparent); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; }

/* Entrance polish kept minimal & safe: base state fully visible. (Opacity-0
   keyframe entrances are avoided — a paused animation clock can freeze them
   invisible.) A subtle transform-only rise is applied via no-preference. */
.fade-in, .rise { opacity: 1; }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .5s cubic-bezier(.16,.8,.26,1); }
}

/* ---------- generic chrome ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
}

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .28em .7em; border-radius: 999px;
  border: 1px solid var(--line-2);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 600; font-size: .92rem;
  padding: .72em 1.25em; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--text-3); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--teal); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--teal) 80%, black);
}
.btn-primary:hover { filter: brightness(1.06); border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--line); }

.placeholder-img {
  background:
    repeating-linear-gradient(135deg, var(--placeholder) 0 12px, transparent 12px 24px),
    var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-align: center;
}

/* track tints applied via class */
.t-individual { --accent: var(--teal); }
.t-family     { --accent: var(--gold); }
.t-faith      { --accent: var(--purple); }
.t-stress     { --accent: var(--rose); }