/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Переменные тем: цвета, тени, радиусы, шрифты

   Визуальный язык держится на четырёх решениях:
   мягкие крупные скругления, многослойные материалы поверхностей,
   тени из двух слоёв вместо одного размытого пятна
   и пружинные кривые движения вместо линейных.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Скругления: от мелких контролов до плавающих панелей ── */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 20px;
  --r-4: 28px;

  /* ── Шаг отступов ─────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 18px;
  --s-5: 26px;
  --s-6: 36px;

  /* ── Движение ─────────────────────────────────────────── */
  /* Пружина без перелёта: быстрый разгон, долгое мягкое торможение */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 0.16s;
  --base: 0.28s;
  --slow: 0.45s;

  /* ── Тёмная тема ──────────────────────────────────────── */
  color-scheme: dark;

  --bg: #0a0a0f;
  --bg-2: #111119;

  /* Материалы: чем толще, тем плотнее подложка */
  --surface-1: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.085);
  --surface-3: rgba(255, 255, 255, 0.12);
  --surface-solid: #14141c;
  --glass-solid: rgba(20, 20, 28, 0.92);
  --panel: rgba(255, 255, 255, 0.04);

  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);

  --text-1: #f5f5f7;
  --text-2: #a9a9b6;
  --text-3: #7d7d8a;

  --accent: #7c6cff;
  --accent-2: #ff6ba8;
  --accent-ink: #ffffff;
  --live: #ff4d6a;
  --mint: #34d3a4;
  --amber: #ffb648;

  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bg-hover: rgba(255, 255, 255, 0.14);
  --switch-off: rgba(255, 255, 255, 0.16);
  --sel-bg: #b98bff;
  --sel-fg: #12001f;

  /* Тени в два слоя: контактная и рассеянная. Один слой
     всегда выглядит либо грязным, либо плоским. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 1px 3px rgba(0, 0, 0, 0.34), 0 12px 28px -10px rgba(0, 0, 0, 0.5);
  --shadow-4: 0 2px 6px rgba(0, 0, 0, 0.36), 0 28px 60px -20px rgba(0, 0, 0, 0.62);

  --glow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  --glow-accent: 0 10px 30px -14px var(--accent);

  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-text: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ── Светлая тема ───────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f2f6;
  --bg-2: #ffffff;

  --surface-1: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.9);
  --surface-3: #ffffff;
  --surface-solid: #ffffff;
  --glass-solid: rgba(255, 255, 255, 0.94);
  --panel: rgba(255, 255, 255, 0.6);

  --border-1: rgba(12, 12, 28, 0.09);
  --border-2: rgba(12, 12, 28, 0.15);

  --text-1: #131318;
  --text-2: #55555f;
  --text-3: #6b6b7a;

  --accent: #6448ff;
  --accent-2: #ff4f96;
  --accent-ink: #ffffff;
  --live: #e5384f;
  --mint: #12a97c;
  --amber: #d0850c;

  --btn-bg: #ffffff;
  --btn-bg-hover: #ffffff;
  --switch-off: rgba(12, 12, 28, 0.18);
  --sel-bg: #6b2fd6;
  --sel-fg: #ffffff;

  --shadow-1: 0 1px 2px rgba(16, 16, 40, 0.06);
  --shadow-2: 0 1px 2px rgba(16, 16, 40, 0.06), 0 4px 12px -4px rgba(16, 16, 40, 0.1);
  --shadow-3: 0 1px 3px rgba(16, 16, 40, 0.07), 0 12px 28px -10px rgba(16, 16, 40, 0.14);
  --shadow-4: 0 2px 6px rgba(16, 16, 40, 0.08), 0 28px 60px -20px rgba(16, 16, 40, 0.18);

  --glow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  --glow-accent: 0 10px 30px -14px var(--accent);
}

/* ── Шрифтовые пресеты витрины ──────────────────────────── */
[data-font="clean"] { --font-display: "Onest", system-ui, sans-serif; }
[data-font="mono"] {
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-text: "JetBrains Mono", ui-monospace, monospace;
}