/* ========================================================================
 * Mnemex Design Tokens
 * Единый источник правды: цвета / типографика / отступы / радиусы / тени.
 * Версия: 1.0.0
 * Тема: светлая + тёмная (prefers-color-scheme)
 * ======================================================================== */

/* ─── Светлая тема ─── */
:root,
[data-theme="light"] {
  /* ── Идентичность (A1) ── */
  --bg:             #FBFAF8;   /* тёплый бумажный фон */
  --surface:        #FFFFFF;
  --fg:             #1C1A18;   /* мягкий чёрный, не #000 */
  --muted:          #787571;   /* тёплый серый */
  --border:         #E8E4DE;   /* тёплый бежево-серый */
  --accent:         #5B6C9E;   /* muted indigo — спокойный, доверительный */
  --accent-strong:  #45548A;   /* для текста на accent-фоне, hover */

  /* ── B-слоты (производные) ── */
  --fg-soft:        rgba(28, 26, 24, 0.06);
  --fg-muted-2:     rgba(28, 26, 24, 0.35);
  --surface-warm:   #F7F4EF;
  --border-soft:    rgba(28, 26, 24, 0.07);
  --accent-soft:    rgba(91, 108, 158, 0.10);
  --accent-muted:   rgba(91, 108, 158, 0.28);
  --accent-on:      #FFFFFF;

  /* ── Accent-состояния ── */
  --accent-hover:   color-mix(in oklab, var(--accent), black 10%);
  --accent-active:  color-mix(in oklab, var(--accent), black 16%);

  /* ── Семантические ── */
  --success:        #2D8A56;
  --success-soft:   rgba(45, 138, 86, 0.10);
  --warn:           #C4870E;
  --warn-soft:      rgba(196, 135, 14, 0.10);
  --danger:         #C43E3E;
  --danger-soft:    rgba(196, 62, 62, 0.10);
  --info:           #5B6C9E;
  --info-soft:      rgba(91, 108, 158, 0.10);

  /* ── Типографика ── */
  --font-body:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --font-display:   var(--font-body);
  --font-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* Типо-шкала (RU-safe) */
  --fs-display: 34px;
  --fs-h1:      26px;
  --fs-h2:      21px;
  --fs-h3:      17px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-caption: 11px;

  /* Веса */
  --fw-regular: 400;
  --fw-medium:  510;
  --fw-semibold:590;
  --fw-bold:    620;

  /* Межстрочные */
  --lh-tight:   1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.55;

  /* ── Отступы (сетка 4px) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* Безопасные зоны */
  --safe-top:    54px;
  --safe-bottom: 34px;
  --pad-inline:  20px;

  /* ── Радиусы ── */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── Тени ── */
  --elev-flat:    none;
  --elev-card:    0 1px 3px rgba(28, 26, 24, 0.04), 0 1px 2px rgba(28, 26, 24, 0.06);
  --elev-raised:  0 4px 16px rgba(28, 26, 24, 0.06), 0 1px 4px rgba(28, 26, 24, 0.04);
  --elev-sticky:  0 8px 32px rgba(28, 26, 24, 0.08), 0 2px 8px rgba(28, 26, 24, 0.04);
  --elev-modal:   0 16px 48px rgba(28, 26, 24, 0.12), 0 4px 16px rgba(28, 26, 24, 0.06);

  /* ── Фокус ── */
  --focus-ring: 0 0 0 3px rgba(91, 108, 158, 0.28);

  /* ── Движение ── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ─── Тёмная тема ─── */
[data-theme="dark"] {
  --bg:            #16141A;
  --surface:       #1F1D25;
  --fg:            #EBE9E5;
  --muted:         #94908A;
  --border:        rgba(235, 233, 229, 0.08);
  --accent:        #8C9DCD;
  --accent-strong: #A3B2DB;

  --fg-soft:       rgba(235, 233, 229, 0.06);
  --fg-muted-2:    rgba(235, 233, 229, 0.30);
  --surface-warm:  #22202A;
  --border-soft:   rgba(235, 233, 229, 0.06);
  --accent-soft:   rgba(140, 157, 205, 0.12);
  --accent-muted:  rgba(140, 157, 205, 0.28);
  --accent-on:     #16141A;

  --accent-hover:  color-mix(in oklab, var(--accent), white 8%);
  --accent-active: color-mix(in oklab, var(--accent), white 14%);

  --success:       #4CAF6E;
  --success-soft:  rgba(76, 175, 110, 0.12);
  --warn:          #D9A520;
  --warn-soft:     rgba(217, 165, 32, 0.12);
  --danger:        #E05555;
  --danger-soft:   rgba(224, 85, 85, 0.12);
  --info:          #8C9DCD;
  --info-soft:     rgba(140, 157, 205, 0.12);

  --elev-card:     0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --elev-raised:   0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10);
  --elev-sticky:   0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
  --elev-modal:    0 16px 48px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.16);

  --focus-ring: 0 0 0 3px rgba(140, 157, 205, 0.32);
}

/* ─── Авто-тема ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #16141A;
    --surface:       #1F1D25;
    --fg:            #EBE9E5;
    --muted:         #94908A;
    --border:        rgba(235, 233, 229, 0.08);
    --accent:        #8C9DCD;
    --accent-strong: #A3B2DB;

    --fg-soft:       rgba(235, 233, 229, 0.06);
    --fg-muted-2:    rgba(235, 233, 229, 0.30);
    --surface-warm:  #22202A;
    --border-soft:   rgba(235, 233, 229, 0.06);
    --accent-soft:   rgba(140, 157, 205, 0.12);
    --accent-muted:  rgba(140, 157, 205, 0.28);
    --accent-on:     #16141A;

    --accent-hover:  color-mix(in oklab, var(--accent), white 8%);
    --accent-active: color-mix(in oklab, var(--accent), white 14%);

    --success:       #4CAF6E;
    --success-soft:  rgba(76, 175, 110, 0.12);
    --warn:          #D9A520;
    --warn-soft:     rgba(217, 165, 32, 0.12);
    --danger:        #E05555;
    --danger-soft:   rgba(224, 85, 85, 0.12);
    --info:          #8C9DCD;
    --info-soft:     rgba(140, 157, 205, 0.12);

    --elev-card:     0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --elev-raised:   0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10);
    --elev-sticky:   0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
    --elev-modal:    0 16px 48px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.16);

    --focus-ring: 0 0 0 3px rgba(140, 157, 205, 0.32);
  }
}