/* ═══════════════════════════════════════════════════════════════════════════
   NutriFormula · TOKENS DE DISEÑO
   Único lugar donde se definen colores, tipografía, tamaños, espaciados,
   bordes y sombras. styles.css solo consume estas variables.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fuentes alojadas localmente (sin depender de CDN) ───────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('vendor/fonts/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('vendor/fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* ── Color: marca (azul) ─────────────────────────────────────────────────── */
  --primary:        #1f4ff5;   /* azul de marca: botones, enlaces, selección · blanco encima: 6.0:1 */
  --primary-hover:  #1a42d1;
  --primary-soft:   #e8edff;   /* fondos suaves de elementos activos */
  --primary-border: #c5d1ff;
  --on-primary:     #ffffff;

  /* ── Color: estados ──────────────────────────────────────────────────────── */
  --success:        #2e7d32;  --success-soft: #e8f4e8;  --success-border: #bddcbf;
  --warning:        #b45309;  --warning-soft: #fdf3e4;  --warning-border: #f1d4a8;
  --error:          #c62828;  --error-soft:   #fdeeee;  --error-border:   #f4c6c6;

  /* ── Color: neutros ──────────────────────────────────────────────────────── */
  --bg:             #f4f5f7;
  --surface:        #ffffff;
  --surface-2:      #f9fafb;
  --border:         #e6e8ec;
  --border-strong:  #d5d9e0;
  --text:           #0b0d12;
  --text-2:         #3d4452;
  --muted:          #5f6675;   /* sobre --bg: 5.4:1 */
  --grid-line:      #cbd3dc;   /* líneas de la cuadrícula de las matrices */
  --grid-header:    #eef1f5;   /* fondo de los encabezados de columna */
  --placeholder:    #707888;

  /* ── Tipografía ──────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;  /* solo códigos, SKU y números de tablas */

  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    14px;
  --text-md:      16px;
  --text-lg:      20px;
  --text-xl:      28px;   /* título de página */
  --text-display: 40px;   /* inicio */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Espaciado (base 4) ──────────────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;

  /* ── Bordes ──────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;   --radius-md: 8px;   --radius-lg: 12px;   --radius-xl: 16px;   --radius-pill: 999px;
  --line: 1px solid var(--border);

  /* ── Sombras (suaves) ────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 1px 2px rgba(16,24,40,.05), 0 8px 20px -10px rgba(16,24,40,.14);
  --shadow-lg: 0 2px 4px rgba(16,24,40,.06), 0 18px 36px -14px rgba(16,24,40,.20);
  --focus-ring: 0 0 0 3px rgba(31,79,245,.28);

  /* ── Iconos ──────────────────────────────────────────────────────────────── */
  --icon-stroke: 1.75;

  /* ═══ Alias heredados (los usa styles.css mientras se migra página por página) ═══ */
  --border2:   var(--border-strong);
  --accent:    var(--primary);
  --accent-fg: var(--primary);
  --on-accent: var(--on-primary);
  --accent2:   var(--primary);
  --danger:    var(--error);
  --warn:      var(--warning);
  --ok:        var(--success);
  --radius:    var(--radius-lg);
  --mono:      var(--font-mono);
  --serif:     var(--font-sans);
  --shadow-card: var(--shadow-md);
  --shadow-lift: var(--shadow-lg);
}

/* ─── Iconos Lucide (sprite en index.html; se usan con icono('nombre')) ───── */
.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 18px; height: 18px; }
.icon--lg { width: 20px; height: 20px; }