/* theme.css — M4SH Studio design tokens (SSOT, дві теми: dark / light).
   Кожна сторінка підключає ЦЕЙ файл; локально дозволений ТІЛЬКИ --accent
   (+ його light-варіант). Див. THEME_SSOT.md (INV-T1..T5).

   Темні значення = канон, знятий з фактичних :root інструментів і хабу
   (zero visual diff при міграції). Світла палітра — «паперова», у дусі
   nmt-3d-bundle (затверджується власником на live-перегляді).

   ВАЖЛИВО: тема перемикає лише UI chrome. Сцена (canvas, відео-експорт,
   фон кадру #04070d, оверлеї поверх кадру) від теми НЕ залежить (INV-T1). */

:root, [data-theme="dark"] {
  color-scheme: dark;

  /* — tool chrome (бічна панель, док, контроли) — */
  --bg:      #0b0b0e;
  --panel:   #131318;
  --panel-2: #1b1b22;
  --line:    #2a2a33;
  --line-hov:#3a3a45;
  --txt:     #e8e6e2;
  --txt-2:   #9a978f;
  --txt-3:   #66635c;
  --input-bg:#0e0e12;
  --back-link:#8b93a1;
  --accent:  #22d3ee;            /* дефолт; кожен інструмент перекриває локально */
  --accent-contrast:#042027;     /* текст на кнопках із фоном --accent */
  --stage-bg: radial-gradient(120% 120% at 50% 0%, #15151b 0%, #0b0b0e 60%); /* тло навколо кадру */

  /* — brand / hub (синя сторона) — */
  --ink:     #070b14;
  --dark:    #0a0f1c;
  --panel-b: #111827;
  --panel-b2:#0e1525;
  --line-b:  #1f2937;
  --line-b2: #2a3647;
  --green:   #22c55e;
  --green-d: #16a34a;
  --cyan:    #22d3ee;
  --txt-hi:  #ffffff;
  --muted:   #9ca3af;
  --muted-2: #6b7280;
  --glow:    #11203a;            /* верхнє сяйво фону хабу */

  /* — helpers — */
  --grid-dot: rgba(255,255,255,0.05);
  --backdrop: rgba(4,6,13,0.72);
  --danger:   #f87171;
  --shadow-card: 0 20px 70px rgba(0,0,0,0.6), 0 0 0 1px #000;

  /* — type / radii (theme-invariant) — */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px;
}

[data-theme="light"] {
  color-scheme: light;

  /* — tool chrome — */
  --bg:      #f4ede0;
  --panel:   #faf4e6;
  --panel-2: #efe7d4;
  --line:    #ddd2bb;
  --line-hov:#c4b59a;
  --txt:     #2b2118;
  --txt-2:   #5a4a3a;
  --txt-3:   #8a7860;
  --input-bg:#fffaf0;
  --back-link:#7a6a52;
  --accent-contrast:#fffaf0;
  --stage-bg: radial-gradient(120% 120% at 50% 0%, #eae1cd 0%, #f4ede0 60%);

  /* — brand / hub — */
  --ink:     #f6f0e3;
  --dark:    #efe8d8;
  --panel-b: #fdf8ec;
  --panel-b2:#f3ebd9;
  --line-b:  #e4d9c2;
  --line-b2: #d5c7ab;
  --green:   #16a34a;
  --green-d: #15803d;
  --cyan:    #0e7d99;
  --txt-hi:  #1f1812;
  --muted:   #6b5d49;
  --muted-2: #8d7d65;
  --glow:    #efe3c5;

  /* — helpers — */
  --grid-dot: rgba(43,33,24,0.10);
  --backdrop: rgba(43,33,24,0.45);
  --danger:   #bb3322;
  --shadow-card: 0 20px 70px rgba(43,33,24,0.20), 0 0 0 1px rgba(43,33,24,0.08);
}

/* shared dot-grid backdrop helper */
.m4sh-grid::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}