/* ============================================================
   2breath — shared tokens & base
   Clean white minimalism · subtle Y2K "byte" accents
   Icons stay pixel-art. Light = paper white · Dark = clean ink
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- LIGHT · warm day (style-guide palette) ---- */
  --bg:           #FAF5EC;
  --bg-tint:      #F3EADC;
  --surface:      #FFFFFF;
  --elevated:     #FDFAF4;
  --text:         #2A2A2A;
  --text-2:       #6B6B6B;
  --text-3:       #A29C90;
  --accent:       #3D4A3D;
  --accent-2:     #50624F;
  --on-accent:    #FDFAF4;
  --warm:         #E8B597;
  --lamp:         #E8A862;
  --sage:         #9CB89C;
  --gold:         #C9A864;
  --border:       #E5DFD3;
  --border-2:     #D8CDB9;
  --danger:       #C97064;
  --success:      #7FA67F;
  --brand-grad:   linear-gradient(135deg, #9CB89C 0%, #E8B597 100%);
  --brand-grad-iri: linear-gradient(135deg, #9CB89C 0%, #E8A862 55%, #E8B597 100%);
  --brand-soft:   linear-gradient(135deg, rgba(156,184,156,.16) 0%, rgba(232,181,151,.16) 100%);
  --shadow-sm:    0 1px 2px rgba(61,74,61,.05), 0 2px 10px rgba(61,74,61,.05);
  --shadow:       0 4px 24px rgba(61,74,61,.08);
  --shadow-lg:    0 18px 50px rgba(61,74,61,.12);
  --glow:         0 6px 22px -6px rgba(232,168,98,.5);
  --ring:         rgba(61,74,61,.4);
  --dot:          rgba(61,74,61,.07);

  --r-xs: 2px;  --r-sm: 3px;  --r-md: 4px;  --r-lg: 6px;  --r-xl: 8px;  --r-2xl: 10px;  --r-full: 999px;

  --serif: 'Space Grotesk', system-ui, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --reaction-hug:      #F2A65A;
  --reaction-hear:     #54C2A8;
  --reaction-together: #A8C5E8;
  --reaction-thanks:   #D4A8E8;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --grain-opacity: 0;
}

[data-theme="dark"] {
  /* ---- DARK · lamp-lit evening (warm, not black) ---- */
  --bg:           #211C16;
  --bg-tint:      #2A241B;
  --surface:      #2B2519;
  --elevated:     #342D20;
  --text:         #F3EADC;
  --text-2:       #BAAF9C;
  --text-3:       #8C8270;
  --accent:       #BBD0AE;
  --accent-2:     #CBDDBF;
  --on-accent:    #211C16;
  --warm:         #E8B597;
  --lamp:         #F0B468;
  --sage:         #9CB89C;
  --gold:         #D8BC7A;
  --border:       #3E3526;
  --border-2:     #4E4433;
  --danger:       #DB8A7E;
  --success:      #9CB89C;
  --brand-grad:   linear-gradient(135deg, #9CB89C 0%, #E8A862 100%);
  --brand-grad-iri: linear-gradient(135deg, #BBD0AE 0%, #E8A862 55%, #E8B597 100%);
  --brand-soft:   linear-gradient(135deg, rgba(156,184,156,.18) 0%, rgba(232,168,98,.18) 100%);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow:       0 6px 24px rgba(0,0,0,.45);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.55);
  --glow:         0 6px 30px -4px rgba(240,180,104,.55);
  --ring:         rgba(187,208,174,.6);
  --dot:          rgba(243,234,220,.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .45s var(--ease), color .45s var(--ease);
}

h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; color: var(--text); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* dot-grid texture utility (subtle Y2K) */
.dotgrid { background-image: radial-gradient(var(--dot) 1.1px, transparent 1.1px); background-size: 22px 22px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 3px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s;
  border: 1px solid transparent; white-space: nowrap; line-height: 1; letter-spacing: -.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow), var(--glow); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-soft { background: var(--bg-tint); color: var(--text); border-color: var(--border); }
.btn-soft:hover { border-color: var(--border-2); }

.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; height: 34px; }
.logo img { height: 100%; width: auto; }
.logo .logo-dark { display: none; }
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark  { display: block; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  position: relative; width: 58px; height: 30px; border-radius: var(--r-full);
  background: var(--bg-tint); border: 1px solid var(--border);
  display: inline-flex; align-items: center; padding: 0 4px;
  transition: background .35s var(--ease), border-color .35s var(--ease); flex: none; cursor: pointer;
}
.theme-toggle .knob {
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--brand-grad); box-shadow: var(--shadow-sm);
  transform: translateX(0); transition: transform .4s var(--ease);
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(27px); }
.theme-toggle .knob::before { content: "☀"; }
[data-theme="dark"] .theme-toggle .knob::before { content: "☾"; }

/* ---------- breathing animation ---------- */
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.breathe { animation: breathe 6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .breathe { animation: none; } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- image placeholder ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(75,54,224,.045) 10px 11px),
    var(--bg-tint);
  border: 1px solid var(--border); border-radius: var(--r-md);
  display: grid; place-items: center;
}
.ph span { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .04em; text-align: center; padding: 6px 12px; }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); }

* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

body::after { content: none; }

/* ---------- pixel-art icon styling (kept by request) ---------- */
svg[shape-rendering="crispEdges"] { image-rendering: pixelated; }