/* SOLACES — hi-fi tokens for 3 visual directions */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── A: Quiet (default) — minimal, near-mono, lots of whitespace ────── */
:root,
[data-skin="quiet"] {
  --bg:           #F2EEE6;
  --bg-deep:      #E8E2D6;
  --bg-card:      #FAF8F3;
  --line:         #D8D0BE;
  --line-strong:  #1A1815;
  --ink:          #1A1815;
  --ink-soft:     #4A463F;
  --ink-faint:    #7E776A;
  --ink-ghost:    #B5AE9F;
  --accent:       #B84320;
  --accent-deep:  #8C2E14;
  --accent-soft:  rgba(184,67,32,0.08);
  --accent-glow:  rgba(184,67,32,0.18);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.05);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.07);
  --grain-opacity: 0;
}

/* ── C: Atmospheric — dark warm, presence-led, glowing ──────────────── */
[data-skin="atmos"] {
  --bg:           #14110D;
  --bg-deep:      #1C1813;
  --bg-card:      #2E2720;
  --line:         #2E2820;
  --line-strong:  #ECE5D2;
  --ink:          #ECE5D2;
  --ink-soft:     #B8B0A0;
  --ink-faint:    #847C6C;
  --ink-ghost:    #4A4438;
  --accent:       #E8704A;
  --accent-deep:  #B84320;
  --accent-soft:  rgba(232,112,74,0.10);
  --accent-glow:  rgba(232,112,74,0.30);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.5);
  --grain-opacity: 0.4;
}

:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  transition: background 0.5s ease, color 0.4s ease;
  overflow: hidden;
}

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

/* Page-level paper grain */
.grain-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-skin="atmos"] .grain-bg { mix-blend-mode: screen; opacity: 0.25; }

.app-root {
  position: relative; z-index: 2;
  height: calc(100vh / 1.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  zoom: 1.25;
}

/* Type utilities */
.fr-d { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: -0.025em; }
.mn { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow.accent { color: var(--accent); }

/* Buttons */
.btn {
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  padding: 11px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.2s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.ghost { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.btn.ghost:hover { background: var(--bg-deep); color: var(--ink); }
.btn.lg { padding: 16px 26px; font-size: 12px; }
.btn.sm { padding: 8px 14px; font-size: 10px; }

/* Cover art — generated gradient placeholders, no flat hash */
.cover {
  background: linear-gradient(135deg, var(--c1, #B84320), var(--c2, #4A463F));
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.cover::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* input box glow — dark skin only */
[data-skin="atmos"] .entry-box {
  border-color: rgba(232,112,74,0.25);
  box-shadow: 0 0 0 1px rgba(232,112,74,0.08), 0 0 32px rgba(232,112,74,0.12), 0 2px 8px rgba(0,0,0,0.4);
}
[data-skin="atmos"] .entry-box:focus-within {
  border-color: rgba(232,112,74,0.5);
  box-shadow: 0 0 0 1px rgba(232,112,74,0.15), 0 0 48px rgba(232,112,74,0.18), 0 2px 12px rgba(0,0,0,0.5);
}

/* placeholder */
::placeholder { color: var(--ink-ghost); opacity: 0.6; font-weight: 300; }
::-webkit-input-placeholder { color: var(--ink-ghost); opacity: 0.6; font-weight: 300; }

/* scrollbar */
.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-ghost) transparent;
}
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--ink-ghost); border-radius: 3px; }

/* fades / animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse  { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes glow   { 0%,100% { box-shadow: 0 0 60px var(--accent-glow), 0 0 0 1px var(--accent); transform: scale(1); }
                    50%     { box-shadow: 0 0 120px var(--accent-glow), 0 0 0 1px var(--accent); transform: scale(1.02); } }
@keyframes ringOut { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.fade-up { animation: fadeUp 0.6s ease both; }
.fade-in { animation: fadeIn 0.5s ease both; }