/* ───────────────────────────────────────────────────────────
 * synccore-web · shared theme
 *
 * Wird von landing/, chlorophyll/, messenger/ eingebunden.
 * Definiert: CSS-Variablen für 3 Moods (warm/dark/mono),
 *            Reset, Scrollbar, Grain, Animationen.
 *
 * Site-spezifische Overrides gehen in das jeweilige index.html
 * NACH dem Einbinden dieser Datei (z.B. botanisches Grün als
 * Default-Accent für chlorophyll).
 * ─────────────────────────────────────────────────────────── */

:root {
  /* defaults = warm mood */
  --bg:        #f5f1e8;
  --bg-2:      #ebe5d4;
  --surface:   #fffbef;
  --ink:       #1c1a14;
  --ink-2:     #5a5444;
  --ink-3:     #9a937f;
  --accent:    #3f5d3a;
  --accent-2:  #c9742a;
  --rule:      #d9d2bb;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg:        #0f0f0d;
  --bg-2:      #161613;
  --surface:   #1a1a16;
  --ink:       #f0ece0;
  --ink-2:     #948e7a;
  --ink-3:     #5a5444;
  --accent:    #7df9a0;
  --accent-2:  #ffb774;
  --rule:      #2a2a22;
}

[data-theme="mono"] {
  --bg:        #fafaf8;
  --bg-2:      #f0f0ed;
  --surface:   #ffffff;
  --ink:       #111110;
  --ink-2:     #555550;
  --ink-3:     #999990;
  --accent:    #111110;
  --accent-2:  #111110;
  --rule:      #d8d8d3;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 400ms ease, color 320ms ease;
}

a { color: inherit; text-decoration: none; }

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius: 4px;
}

/* Background grain — subtle paper texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

[data-theme="dark"] body::before {
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* Shared animations */
@keyframes blink  { 50% { opacity: 0; } }
@keyframes pulse  { 0%, 100% { opacity: 1; transform: scale(1); }
                    50%      { opacity: 0.55; transform: scale(0.85); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); }
                    to   { opacity: 1; transform: translateY(0); } }
@keyframes drift  { 0%, 100% { transform: translateY(0); }
                    50%      { transform: translateY(-4px); } }
@keyframes scan   { 0%, 100% { top: 8%; }
                    50%      { top: 92%; } }
@keyframes sway   { 0%, 100% { transform: rotate(-2deg); }
                    50%      { transform: rotate(2deg); } }