/* ============================================================
   DESIGN TOKENS
   Единый источник визуальных переменных экосистемы.
   Не редактировать напрямую в приложениях —
   переопределять через app.css если нужны отклонения.
   ============================================================ */

:root {
  /* ── Palette: Light (default) ── */
  --bg:          #f0ede8;
  --bg2:         #faf8f5;
  --bg3:         #ede9e3;
  --border:      rgba(60,50,30,0.10);
  --border2:     rgba(60,50,30,0.18);
  --text:        #1e1a12;
  --text-dim:    #7a7060;
  --text-dimmer: #b8b0a0;
  --accent:      #c05a1a;
  --accent-light:#e8784a;
  --accent-glow: rgba(192,90,26,0.10);
  --accent-bg:   rgba(192,90,26,0.07);
  --success:     #2a7a3a;
  --danger:      #c03030;
  --warning:     #a07010;

  /* ── Typography ── */
  --font-ui:     'Space Mono', monospace;
  --font-body:   'DM Sans', sans-serif;
  --font-read:   'EB Garamond', Georgia, serif;

  /* ── Spacing scale ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* ── Shape ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* ── Elevation ── */
  --shadow-sm:  0 1px 4px rgba(60,40,10,0.08);
  --shadow-md:  0 2px 12px rgba(60,40,10,0.10), 0 1px 3px rgba(60,40,10,0.07);
  --shadow-lg:  0 8px 32px rgba(60,40,10,0.12), 0 2px 8px rgba(60,40,10,0.08);

  /* ── Layout ── */
  --header-h:   52px;
  --sidebar-w:  280px;
  --content-max:740px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(.4,0,.2,1);
  --duration:   0.22s;
}

/* ── Dark theme ── */
.theme-dark {
  --bg:          #1a1612;
  --bg2:         #221e19;
  --bg3:         #2c2720;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.13);
  --text:        #e8dfc8;
  --text-dim:    #9a8e78;
  --text-dimmer: #5a5248;
  --accent:      #c9a84c;
  --accent-light:#e8c870;
  --accent-glow: rgba(201,168,76,0.12);
  --accent-bg:   rgba(201,168,76,0.07);
  --success:     #4a9a5a;
  --danger:      #e05050;
  --warning:     #d09030;
}

/* ── Sepia theme ── */
.theme-sepia {
  --bg:          #f2e8d0;
  --bg2:         #e8dcc0;
  --bg3:         #ddd0b0;
  --border:      rgba(0,0,0,0.08);
  --border2:     rgba(0,0,0,0.14);
  --text:        #2e2010;
  --text-dim:    #6a4820;
  --text-dimmer: #b09060;
  --accent:      #8a5010;
  --accent-light:#b07030;
  --accent-glow: rgba(138,80,16,0.12);
  --accent-bg:   rgba(138,80,16,0.07);
}

/* ── Mobile overrides ── */
@media (max-width: 700px) {
  :root {
    --header-h:  56px;
    --sidebar-w: min(320px, 88vw);
    --s7:        32px;
  }
}