/* vmatrix · design tokens
   Light + dark themes, configurable accent.
   Mounted on .vmx-theme containers (each artboard gets its own scope). */

.vmx-theme {
  /* Spacing — 4px base */
  --vmx-2xs: 4px;
  --vmx-xs: 8px;
  --vmx-sm: 12px;
  --vmx-md: 16px;
  --vmx-lg: 24px;
  --vmx-xl: 32px;
  --vmx-2xl: 48px;
  --vmx-3xl: 64px;

  /* Radii */
  --vmx-r-sm: 4px;
  --vmx-r-md: 8px;
  --vmx-r-lg: 12px;
  --vmx-r-xl: 16px;
  --vmx-r-full: 9999px;

  /* Typography. Geist/Geist Mono загружаются в vmatrix.html (в production — next/font);
     Inter/JetBrains Mono — фоллбеки, если Geist недоступен. */
  --vmx-font-sans: "Geist", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --vmx-font-serif: "Source Serif 4", "Tinos", Georgia, serif;
  --vmx-font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Density (overridden by [data-density]) */
  --vmx-density: 1;
  --vmx-row-h: 36px;

  font-family: var(--vmx-font-sans);
  color: var(--vmx-text-primary);
  background: var(--vmx-bg-primary);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ── Light theme ─────────────────────────── */
.vmx-theme[data-theme="light"] {
  --vmx-bg-primary: #FAF9F7;
  --vmx-bg-secondary: #F1EFE8;
  --vmx-bg-tertiary: #E9E7DF;
  --vmx-bg-elev: #FFFFFF;

  --vmx-text-primary: #2C2C2A;
  --vmx-text-secondary: #5F5E5A;
  /* 4.86:1 на bg-primary — tertiary используется для текста 10.5–12px,
     поэтому обязан проходить AA 4.5:1 (прежний #888780 давал 3.43:1). */
  --vmx-text-tertiary: #6F6E68;

  --vmx-border-tertiary: rgba(44, 44, 42, 0.12);
  --vmx-border-secondary: rgba(44, 44, 42, 0.22);
  --vmx-border-primary: rgba(44, 44, 42, 0.40);

  --vmx-success-bg: #E8EFD9;
  --vmx-success-fg: #3B6D11;
  --vmx-warning-bg: #F1E2C2;
  --vmx-warning-fg: #854F0B;
  --vmx-danger-bg: #F2D5D5;
  --vmx-danger-fg: #A32D2D;
  --vmx-info-bg: #D8E5F2;
  --vmx-info-fg: #185FA5;

  --vmx-accent-50: color-mix(in oklch, var(--vmx-accent-600) 8%, var(--vmx-bg-primary));
  --vmx-accent-100: color-mix(in oklch, var(--vmx-accent-600) 16%, var(--vmx-bg-primary));
  --vmx-accent-200: color-mix(in oklch, var(--vmx-accent-600) 30%, var(--vmx-bg-primary));
  --vmx-accent-400: color-mix(in oklch, var(--vmx-accent-600) 70%, var(--vmx-bg-primary));
  /* warm-600 из README; 4.89:1 c белым accent-fg, 4.65:1 как ссылка на bg-primary
     (прежний #BA7517 давал 3.72:1 — провал AA на каждом primary-CTA). */
  --vmx-accent-600: #C24A1C;
  --vmx-accent-800: color-mix(in oklch, var(--vmx-accent-600) 70%, #000);
  --vmx-accent-900: color-mix(in oklch, var(--vmx-accent-600) 50%, #000);
  --vmx-accent-fg: #FFFFFF;

  --vmx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --vmx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  color-scheme: light;
}

/* ── Dark theme ──────────────────────────── */
.vmx-theme[data-theme="dark"] {
  --vmx-bg-primary: #1B1B19;
  --vmx-bg-secondary: #2C2C2A;
  --vmx-bg-tertiary: #232321;
  --vmx-bg-elev: #2C2C2A;

  --vmx-text-primary: #F1EFE8;
  --vmx-text-secondary: #B4B2A9;
  --vmx-text-tertiary: #888780;

  --vmx-border-tertiary: rgba(241, 239, 232, 0.10);
  --vmx-border-secondary: rgba(241, 239, 232, 0.22);
  --vmx-border-primary: rgba(241, 239, 232, 0.40);

  --vmx-success-bg: rgba(151, 196, 89, 0.16);
  --vmx-success-fg: #97C459;
  --vmx-warning-bg: rgba(239, 159, 39, 0.16);
  --vmx-warning-fg: #EF9F27;
  --vmx-danger-bg: rgba(240, 149, 149, 0.16);
  --vmx-danger-fg: #F09595;
  --vmx-info-bg: rgba(133, 183, 235, 0.16);
  --vmx-info-fg: #85B7EB;

  --vmx-accent-50: color-mix(in oklch, var(--vmx-accent-600) 14%, var(--vmx-bg-primary));
  --vmx-accent-100: color-mix(in oklch, var(--vmx-accent-600) 22%, var(--vmx-bg-primary));
  --vmx-accent-200: color-mix(in oklch, var(--vmx-accent-600) 34%, var(--vmx-bg-primary));
  --vmx-accent-400: color-mix(in oklch, var(--vmx-accent-600) 70%, var(--vmx-bg-primary));
  --vmx-accent-600: #EF9F27;
  --vmx-accent-800: color-mix(in oklch, var(--vmx-accent-600) 70%, #fff);
  --vmx-accent-900: color-mix(in oklch, var(--vmx-accent-600) 50%, #fff);
  --vmx-accent-fg: #1B1B19;

  --vmx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --vmx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);

  color-scheme: dark;
}

/* Density */
.vmx-theme[data-density="compact"] { --vmx-density: 0.85; --vmx-row-h: 30px; }
.vmx-theme[data-density="spacious"] { --vmx-density: 1.15; --vmx-row-h: 40px; }