/* =====================================================================
   MARÍA VIRGEN — TOKENS DE DISEÑO (Sprint 1)
   Regla 90/10: ~90% superficies neutras, ~10% acento bronce/champán
   (solo botón primario, indicador activo y borde de foco).
   Paridad Día ("Marfil Editorial") / Noche ("Obsidian Neutral").
   ===================================================================== */

:root {
  /* Tipografía */
  --mv-font-sans: "Inter", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mv-font-serif: "Iowan Old Style", "Source Serif Pro", "Charter", "Cambria", Georgia, "Times New Roman", serif;
  --mv-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Escala */
  --mv-fs-xs: 11.5px;
  --mv-fs-sm: 12.5px;
  --mv-fs-md: 13.5px;
  --mv-fs-lg: 15px;
  --mv-fs-xl: 19px;
  --mv-fs-2xl: 26px;

  --mv-r-sm: 6px;
  --mv-r-md: 10px;
  --mv-r-lg: 14px;
  --mv-r-pill: 999px;

  --mv-sp-1: 4px;
  --mv-sp-2: 8px;
  --mv-sp-3: 12px;
  --mv-sp-4: 16px;
  --mv-sp-5: 20px;
  --mv-sp-6: 24px;
  --mv-sp-8: 32px;

  --mv-header-h: 56px;
  --mv-sidebar-w: 256px;
  --mv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- MODO DÍA — "Marfil Editorial" (valor por defecto) ---------- */
:root,
:root[data-tema="dia"] {
  color-scheme: light;
  --mv-bg: #F8F7F4;
  --mv-surface: #FFFFFF;
  --mv-surface-2: #F3F1EC;
  --mv-surface-hover: #EFECE6;
  --mv-border: #E6E2DA;
  --mv-border-strong: #D6D1C6;

  --mv-ink: #17191E;
  --mv-ink-2: #4A4E57;
  --mv-ink-3: #7D818A;
  --mv-ink-inverse: #FFFFFF;

  /* Acento 10% — bronce sobrio */
  --mv-accent: #8A6A40;
  --mv-accent-hover: #74572F;
  --mv-accent-ink: #FFFFFF;
  --mv-accent-soft: rgba(138, 106, 64, .09);
  --mv-focus: rgba(138, 106, 64, .45);

  /* Estados (discretos, solo puntos y etiquetas) */
  --mv-ok: #3F7D5C;
  --mv-ok-soft: rgba(63, 125, 92, .10);
  --mv-warn: #A8741A;
  --mv-warn-soft: rgba(168, 116, 26, .10);
  --mv-crit: #A9443A;
  --mv-crit-soft: rgba(169, 68, 58, .09);
  --mv-info: #4B6584;
  --mv-info-soft: rgba(75, 101, 132, .09);

  --mv-shadow-sm: 0 1px 2px rgba(23, 25, 30, .04);
  --mv-shadow-md: 0 1px 2px rgba(23, 25, 30, .04), 0 8px 24px rgba(23, 25, 30, .06);
  --mv-shadow-lg: 0 24px 60px rgba(23, 25, 30, .16);
  --mv-overlay: rgba(23, 25, 30, .32);
}

/* ---------- MODO NOCHE — "Obsidian Neutral" ---------- */
:root[data-tema="noche"] {
  color-scheme: dark;
  --mv-bg: #0B0E14;
  --mv-surface: #131822;
  --mv-surface-2: #171D29;
  --mv-surface-hover: #1C2331;
  --mv-border: #222A38;
  --mv-border-strong: #2E3748;

  --mv-ink: #E8EAEE;
  --mv-ink-2: #A8AEBA;
  --mv-ink-3: #727A8A;
  --mv-ink-inverse: #0B0E14;

  /* Acento 10% — champán */
  --mv-accent: #C8A876;
  --mv-accent-hover: #D7BB8F;
  --mv-accent-ink: #14110C;
  --mv-accent-soft: rgba(200, 168, 118, .11);
  --mv-focus: rgba(200, 168, 118, .50);

  --mv-ok: #6FB28C;
  --mv-ok-soft: rgba(111, 178, 140, .12);
  --mv-warn: #D3A04A;
  --mv-warn-soft: rgba(211, 160, 74, .12);
  --mv-crit: #D7766B;
  --mv-crit-soft: rgba(215, 118, 107, .12);
  --mv-info: #8AA4C4;
  --mv-info-soft: rgba(138, 164, 196, .12);

  --mv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
  --mv-shadow-md: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .28);
  --mv-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --mv-overlay: rgba(0, 0, 0, .55);
}