/* ============================================================
   Cerealpaz — Design tokens
   Copiados del design system del proyecto de Claude Design
   (`_ds/…/tokens/*.css`), consolidados en un solo archivo.
   NO editar a mano: si cambia el diseño, volver a exportarlos.
   ============================================================ */

:root {

  /* ── Marca: azul ────────────────────────────────────────── */
  --color-navy-950: #040c18;
  --color-navy-900: #0f2137;
  --color-navy-800: #162e4d;
  --color-navy-700: #1d3a61;
  --color-navy-600: #244876;
  --color-navy-500: #2e5d96;
  --color-navy-400: #5882b5;
  --color-navy-300: #8aabd0;
  --color-navy-200: #c0d2e7;
  --color-navy-100: #dfe8f2;
  --color-navy-50:  #f0f5fb;

  /* ── Marca: verde petróleo (acento) ─────────────────────── */
  --color-teal-900: #073630;
  --color-teal-800: #0c5149;
  --color-teal-700: #106b61;
  --color-teal-600: #14867a;
  --color-teal-500: #1aa395;
  --color-teal-400: #2dbfaf;
  --color-teal-300: #5dd4c6;
  --color-teal-200: #9ee8de;
  --color-teal-100: #d0f4f0;
  --color-teal-50:  #edfaf8;

  /* ── Neutros ────────────────────────────────────────────── */
  --color-gray-950: #0d0f12;
  --color-gray-900: #1a1d22;
  --color-gray-800: #2c3038;
  --color-gray-700: #424852;
  --color-gray-600: #5a6170;
  --color-gray-500: #737b8c;
  --color-gray-400: #9399a6;
  --color-gray-300: #b8bdc8;
  --color-gray-200: #d5d9e0;
  --color-gray-150: #e2e5ec;
  --color-gray-100: #eceff4;
  --color-gray-50:  #f5f7fa;
  --color-white:    #ffffff;
  --color-cream:    #faf9f7;

  /* ── Semánticos ─────────────────────────────────────────── */
  --color-success-800: #104d29;
  --color-success-700: #166534;
  --color-success-600: #1a8045;
  --color-success-500: #22a35a;
  --color-success-400: #4bbd7b;
  --color-success-200: #bbf0d2;
  --color-success-100: #dcfaec;
  --color-success-50:  #f0fdf6;

  --color-warning-800: #723800;
  --color-warning-700: #974d00;
  --color-warning-500: #d97706;
  --color-warning-400: #f59e0b;
  --color-warning-200: #fde68a;
  --color-warning-100: #fef9c3;
  --color-warning-50:  #fffdf0;

  --color-danger-800: #7f1d1d;
  --color-danger-700: #991b1b;
  --color-danger-500: #dc2626;
  --color-danger-400: #f87171;
  --color-danger-200: #fecaca;
  --color-danger-100: #fee2e2;
  --color-danger-50:  #fef2f2;

  --color-info-800:   #1e3a8a;
  --color-info-600:   #1d4ed8;
  --color-info-500:   #3b82f6;
  --color-info-200:   #bfdbfe;
  --color-info-100:   #dbeafe;
  --color-info-50:    #eff6ff;

  /* ── Roles ──────────────────────────────────────────────── */
  --fg-default:        var(--color-navy-900);
  --fg-muted:          var(--color-gray-600);
  --fg-subtle:         var(--color-gray-400);
  --fg-disabled:       var(--color-gray-300);
  --fg-on-emphasis:    var(--color-white);
  --fg-accent:         var(--color-teal-600);
  --fg-accent-strong:  var(--color-teal-700);
  --fg-link:           var(--color-teal-700);
  --fg-link-hover:     var(--color-teal-600);

  --bg-default:        var(--color-white);
  --bg-cream:          var(--color-cream);
  --bg-subtle:         var(--color-gray-50);
  --bg-muted:          var(--color-gray-100);
  --bg-emphasis:       var(--color-navy-900);
  --bg-accent:         var(--color-teal-50);
  --bg-accent-muted:   var(--color-teal-100);

  --border-default:    var(--color-gray-200);
  --border-muted:      var(--color-gray-150);
  --border-strong:     var(--color-gray-300);
  --border-accent:     var(--color-teal-300);
  --border-emphasis:   var(--color-navy-900);
  --border-attention:  var(--color-warning-200);

  --surface-default:   var(--color-white);
  --surface-raised:    var(--color-white);
  --surface-overlay:   var(--color-white);
  --surface-inset:     var(--color-gray-50);
  --surface-row-alt:   #fafbfc;
  --surface-sidebar:   var(--color-navy-900);
  --surface-accent:    var(--color-teal-50);

  /* ── Estados de la app (frescura de datos y automatizaciones) ─ */
  --status-al-dia-bg:        var(--color-success-100);
  --status-al-dia-fg:        var(--color-success-700);
  --status-al-dia-ring:      var(--color-success-400);

  --status-atrasado-bg:      var(--color-warning-100);
  --status-atrasado-fg:      var(--color-warning-700);
  --status-atrasado-ring:    var(--color-warning-400);

  --status-sin-conexion-bg:  var(--color-danger-100);
  --status-sin-conexion-fg:  var(--color-danger-700);
  --status-sin-conexion-ring:var(--color-danger-400);

  --status-dato-viejo-bg:    var(--color-warning-50);
  --status-dato-viejo-fg:    var(--color-warning-800);
  --status-dato-viejo-ring:  var(--color-warning-500);

  --status-falla-bg:         var(--color-danger-50);
  --status-falla-fg:         var(--color-danger-800);
  --status-falla-ring:       var(--color-danger-500);

  --status-neutro-bg:        var(--color-gray-100);
  --status-neutro-fg:        var(--color-gray-600);
  --status-neutro-ring:      var(--color-gray-300);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans:     'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;   /* sólo detalle técnico */
  --font-display:  var(--font-sans);
  --font-serif:    var(--font-sans);

  --text-2xs:   0.625rem;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.03em;
  --tracking-wider:    0.07em;
  --tracking-widest:   0.14em;

  --type-body-font:        var(--font-sans);
  --type-body-weight:      var(--weight-regular);
  --type-body-leading:     var(--leading-relaxed);

  --type-label-font:       var(--font-sans);
  --type-label-weight:     var(--weight-semibold);
  --type-label-tracking:   var(--tracking-wide);

  /* Number — TODO monto, cantidad, variación y celda de tabla.
     Sans con cifras tabulares: nunca monoespaciada. */
  --type-number-font:      var(--font-sans);
  --type-number-weight:    var(--weight-semibold);
  --type-number-variant:   tabular-nums;
  --type-number-align:     right;
  --type-number-leading:   var(--leading-tight);
  --type-number-tracking:  var(--tracking-tight);
  --type-number-hero-size:   1.75rem;
  --type-number-hero-weight: var(--weight-semibold);

  --type-code-font:        var(--font-mono);
  --type-code-weight:      var(--weight-regular);

  /* ── Espaciado (grilla de 4px) ──────────────────────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;
  --space-1:    0.25rem;
  --space-1-5:  0.375rem;
  --space-2:    0.5rem;
  --space-2-5:  0.625rem;
  --space-3:    0.75rem;
  --space-3-5:  0.875rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-7:    1.75rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;

  /* ── Radios ─────────────────────────────────────────────── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-full:  9999px;

  --radius-button:   var(--radius-md);
  --radius-input:    var(--radius-md);
  --radius-card:     var(--radius-lg);
  --radius-badge:    var(--radius-full);
  --radius-avatar:   var(--radius-full);
  --radius-dialog:   var(--radius-xl);

  /* ── Sombras (base azul, no negro) ──────────────────────── */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px 0 rgba(15, 33, 55, 0.05);
  --shadow-sm:    0 1px 3px 0 rgba(15, 33, 55, 0.08), 0 1px 2px -1px rgba(15, 33, 55, 0.04);
  --shadow-md:    0 4px 6px -1px rgba(15, 33, 55, 0.08), 0 2px 4px -2px rgba(15, 33, 55, 0.04);
  --shadow-lg:    0 10px 15px -3px rgba(15, 33, 55, 0.10), 0 4px 6px -4px rgba(15, 33, 55, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(15, 33, 55, 0.12), 0 8px 10px -6px rgba(15, 33, 55, 0.05);
  --shadow-2xl:   0 25px 50px -12px rgba(15, 33, 55, 0.20);

  --shadow-card:           var(--shadow-sm);
  --shadow-button:         var(--shadow-xs);
  --shadow-button-primary: 0 2px 8px -1px rgba(20, 134, 122, 0.35);
  --shadow-dialog:         var(--shadow-2xl);
  --focus-ring:            0 0 0 3px rgba(20, 134, 122, 0.25);

  /* ── Movimiento ─────────────────────────────────────────── */
  --duration-fast:      100ms;
  --duration-normal:    175ms;
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --transition-button:  color var(--duration-fast) var(--ease-out),
                        background-color var(--duration-fast) var(--ease-out),
                        border-color var(--duration-fast) var(--ease-out),
                        box-shadow var(--duration-fast) var(--ease-out);
  --transition-input:   border-color var(--duration-fast) var(--ease-out),
                        box-shadow var(--duration-fast) var(--ease-out);
}

/* ── Rol numérico, aplicado por clase ─────────────────────── */

.num {
  font-family: var(--type-number-font);
  font-weight: var(--type-number-weight);
  font-variant-numeric: var(--type-number-variant);
  letter-spacing: var(--type-number-tracking);
}
.num-cell {
  font-family: var(--type-number-font);
  font-weight: var(--weight-regular);
  font-variant-numeric: var(--type-number-variant);
  text-align: var(--type-number-align);
}
.num-hero {
  font-family: var(--type-number-font);
  font-size: var(--type-number-hero-size);
  font-weight: var(--type-number-hero-weight);
  font-variant-numeric: var(--type-number-variant);
  letter-spacing: var(--type-number-tracking);
  line-height: var(--type-number-leading);
  white-space: nowrap;
}
.tech {
  font-family: var(--type-code-font);
  font-weight: var(--type-code-weight);
}