/* Vendored verbatim from Documents/Visual/tokens.css — Castro Design System v2.0.0.
   Do not edit here: update the source and re-copy, so the dashboard cannot drift
   from the system. Components below consume only the semantic --color-* tokens. */

/* ==========================================================================
   CASTRO DESIGN SYSTEM · tokens.css
   v2.0.0 · 2026-09-02 · Grupo Castro Minerals

   Construido sobre los valores reales de marca:
     Castro Red   #D43941  (logos GCM / CICAP / Mineralógica)
     Ink 900      #252625  (carbón de los logos)
     Ink 800      #363534  (paleta primaria MINFLOT)
     Ink 100      #E8E7E7  (paleta secundaria MINFLOT)
     Cyan 200     #AEE0EF  (paleta secundaria MINFLOT)

   Los componentes consumen SOLO tokens semánticos (--color-*).
   ========================================================================== */

:root {

  /* ------------------------------------- NEUTROS · rampa Ink (cálida) */
  --ink-950: #141715;   /* base oscura             18,05:1 vs blanco */
  --ink-900: #252625;   /* CARBÓN DE LOS LOGOS     15,19:1 */
  --ink-800: #363534;   /* CARBÓN MINFLOT          12,24:1 */
  --ink-700: #515351;   /* texto secundario claro   7,76:1 */
  --ink-600: #707270;   /* texto atenuado claro     4,85:1 · borde AA oscuro 3,72:1 */
  --ink-500: #898B89;   /* borde AA claro 3,43:1 · texto solo sobre oscuro 5,26:1 */
  --ink-400: #A2A5A3;
  --ink-300: #BBBFBC;
  --ink-200: #D2D5D2;   /* borde sutil claro */
  --ink-100: #E8E7E7;   /* GRIS SECUNDARIO MINFLOT */
  --ink-50:  #F2F2F0;   /* superficie clara */
  --white:   #FFFFFF;

  /* ------------------------------------- CASTRO RED · identidad */
  --red-50:  #FEF3F2;
  --red-100: #FFE1DE;
  --red-200: #FFC3BE;
  --red-300: #FF9A96;   /* texto/icono sobre oscuro  8,87:1 */
  --red-400: #F36565;   /* acento sobre oscuro       5,90:1 */
  --red-500: #D43941;   /* CASTRO RED · CANÓNICO     4,71:1 sobre blanco */
  --red-600: #AE2D33;   /* texto sobre claro         6,52:1 */
  --red-700: #892529;
  --red-800: #681B1E;   /* error sobre claro        11,90:1 */
  --red-900: #4A1214;

  /* ------------------------------------- CIAN · dato e información */
  --cyan-50:  #ECFAFE;
  --cyan-100: #CFEEF8;
  --cyan-200: #AEE0EF;  /* SECUNDARIO MINFLOT · rellenos */
  --cyan-300: #76CCE4;  /* sobre oscuro   9,91:1 */
  --cyan-400: #32B2D1;
  --cyan-500: #0396B2;  /* serie de gráfico  3,49:1 sobre blanco */
  --cyan-600: #017890;  /* sobre claro    5,13:1 */
  --cyan-700: #035F73;  /* texto e info   7,27:1 */
  --cyan-800: #034856;
  --cyan-900: #03313C;

  /* ------------------------------------- ESTADOS */
  --amber-50:  #FFF6E8;
  --amber-400: #E69F3A;  /* sobre oscuro  8,07:1 */
  --amber-700: #8F5D04;  /* sobre claro   5,62:1 */

  --green-50:  #E9F8EE;
  --green-400: #56BD78;  /* sobre oscuro  7,69:1 */
  --green-700: #046D36;  /* sobre claro   6,47:1 */

  /* ------------------------------------- TIPOGRAFÍA */
  --font-display: "Couture Bold", "Roboto", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Roboto Mono", "Cascadia Mono", Consolas, monospace;

  --text-display: 700 48px/1.10 var(--font-display);
  --text-h1:      700 36px/1.15 var(--font-body);
  --text-h2:      700 28px/1.25 var(--font-body);
  --text-h3:      500 22px/1.30 var(--font-body);
  --text-body-lg: 400 18px/1.55 var(--font-body);
  --text-body:    400 16px/1.55 var(--font-body);
  --text-small:   400 14px/1.50 var(--font-body);
  --text-ui:      500 14px/1.20 var(--font-body);
  --text-data:    400 14px/1.45 var(--font-mono);
  --text-label:   500 12px/1.40 var(--font-mono);

  --tracking-display: -0.02em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.01em;
  --tracking-label:    0.06em;

  /* ------------------------------------- ESPACIADO */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
  --space-5: 24px;   --space-6: 32px;   --space-7: 40px;   --space-8: 48px;
  --space-9: 64px;   --space-10: 80px;  --space-11: 96px;  --space-12: 128px;

  /* ------------------------------------- FORMA Y ELEVACIÓN */
  --radius-sm: 6px;      /* botones, campos, tags */
  --radius-md: 10px;     /* cards, paneles, tablas */
  --radius-lg: 16px;     /* modales, hojas laterales */
  --radius-full: 999px;

  --border-hairline: 1px;
  --border-strong: 2px;

  --shadow-sm: 0 1px 2px rgba(20,23,21,.06), 0 1px 1px rgba(20,23,21,.04);
  --shadow-md: 0 4px 12px rgba(20,23,21,.08);

  /* ------------------------------------- MOVIMIENTO */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ------------------------------------- LAYOUT */
  --container-max: 1440px;
  --measure-max: 72ch;
}

/* ==========================================================================
   TEMA CLARO (por defecto)
   ========================================================================== */
:root,
[data-theme="light"] {
  --color-bg-base:        var(--white);
  --color-bg-subtle:      var(--ink-50);
  --color-bg-alternate:   var(--ink-100);
  --color-surface:        var(--white);
  --color-surface-raised: var(--white);

  --color-border-subtle:  var(--ink-200);
  --color-border-strong:  var(--ink-500);

  --color-text-primary:   var(--ink-900);
  --color-text-secondary: var(--ink-700);
  --color-text-muted:     var(--ink-600);
  --color-text-inverse:   var(--white);
  --color-text-accent:    var(--red-600);

  --color-brand:          var(--red-500);
  --color-brand-hover:    var(--red-600);
  --color-brand-text:     var(--red-600);
  --color-on-brand:       var(--white);

  --color-data:           var(--cyan-700);
  --color-data-fill:      var(--cyan-200);

  --color-focus-ring:     var(--red-600);

  --color-success-text: var(--green-700);  --color-success-bg: var(--green-50);
  --color-warning-text: var(--amber-700);  --color-warning-bg: var(--amber-50);
  --color-error-text:   var(--red-800);    --color-error-bg:   var(--red-50);
  --color-info-text:    var(--cyan-700);   --color-info-bg:    var(--cyan-50);

  --chart-1: var(--red-600);    /* #AE2D33 */
  --chart-2: var(--cyan-700);   /* #035F73 */
  --chart-3: var(--amber-700);  /* #8F5D04 */
  --chart-4: var(--cyan-500);   /* #0396B2 */
  --chart-5: var(--ink-600);    /* #707270 */
  --chart-6: var(--ink-900);    /* #252625 */
  --chart-neutral: var(--ink-500);
  --chart-grid: var(--ink-200);

  --shadow-level: var(--shadow-sm);
}

/* ==========================================================================
   TEMA OSCURO · sin sombras; la elevación aclara la superficie
   ========================================================================== */
[data-theme="dark"] {
  --color-bg-base:        var(--ink-950);
  --color-bg-subtle:      var(--ink-900);
  --color-bg-alternate:   var(--ink-900);
  --color-surface:        var(--ink-900);
  --color-surface-raised: var(--ink-800);

  --color-border-subtle:  var(--ink-700);
  --color-border-strong:  var(--ink-600);

  --color-text-primary:   var(--white);
  --color-text-secondary: var(--ink-200);
  --color-text-muted:     var(--ink-500);
  --color-text-inverse:   var(--ink-950);
  --color-text-accent:    var(--red-400);

  --color-brand:          var(--red-500);
  --color-brand-hover:    var(--red-400);
  --color-brand-text:     var(--red-400);
  --color-on-brand:       var(--white);

  --color-data:           var(--cyan-300);
  --color-data-fill:      var(--cyan-800);

  --color-focus-ring:     var(--red-400);

  --color-success-text: var(--green-400);  --color-success-bg: var(--ink-800);
  --color-warning-text: var(--amber-400);  --color-warning-bg: var(--ink-800);
  --color-error-text:   var(--red-300);    --color-error-bg:   var(--ink-800);
  --color-info-text:    var(--cyan-300);   --color-info-bg:    var(--ink-800);

  --chart-1: var(--red-400);    /* #F36565 */
  --chart-2: var(--cyan-300);   /* #76CCE4 */
  --chart-3: var(--amber-400);  /* #E69F3A */
  --chart-4: var(--cyan-500);   /* #0396B2 */
  --chart-5: var(--ink-400);    /* #A2A5A3 */
  --chart-6: var(--ink-200);    /* #D2D5D2 */
  --chart-neutral: var(--ink-600);
  --chart-grid: var(--ink-700);

  --shadow-level: none;
}

/* ==========================================================================
   BASE MÍNIMA
   ========================================================================== */
body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
h2 { font: var(--text-h2); letter-spacing: var(--tracking-h2); }
h3 { font: var(--text-h3); }

.data, td.num, .num {
  font: var(--text-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Acción primaria: el único relleno rojo del sistema */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
  border: none;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font: var(--text-ui);
}
.btn-primary:hover { background: var(--color-brand-hover); }

/* Acción destructiva: contorno, nunca relleno */
.btn-destructive {
  background: transparent;
  color: var(--color-error-text);
  border: var(--border-hairline) solid var(--color-error-text);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font: var(--text-ui);
}

:focus-visible {
  outline: var(--border-strong) solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}