/* ============================================================
   Qualios · Color tokens
   Teal identity (Qualios) over the inherited ZentraTek ink ramp.
   Institutional, calm, "aprobado por el auditor".
   ============================================================ */

:root {
  /* ---- Brand · Teal scale (primary identity) --------------- */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;   /* primary action / focus */
  --teal-800: #115e59;   /* hover / press */
  --teal-900: #134e4a;
  --teal-950: #042f2e;

  /* Brand mark color — the vivid teal of the Qualios logo (logos only) */
  --brand-mark: #00cdb6;

  /* ---- Neutral · ZentraTek ink ramp (cool slate) ----------- */
  --slate-0:   #ffffff;
  --slate-50:  #f9fafb;
  --slate-100: #f0f2f5;   /* cloud — alternate surface */
  --slate-200: #e3e8ee;   /* default border */
  --slate-300: #c4cdd5;   /* input border */
  --slate-400: #919eab;
  --slate-500: #637381;   /* secondary text */
  --slate-600: #454f5b;
  --slate-700: #212b36;   /* ink — primary text */
  --slate-800: #161c24;
  --slate-900: #0e1217;
  --slate-950: #060a0e;

  /* ---- Semantic state hues · CRÍTICO: separados de la marca -- */
  /* Conforme / vigente / cerrado */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-500: #059669;
  --green-600: #047857;
  --green-700: #065f46;

  /* Próximo a vencer / atención / pendiente */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* No conforme / vencido / crítico */
  --red-50:   #fef2f2;
  --red-100:  #fee2e2;
  --red-500:  #dc2626;
  --red-600:  #c41f1f;
  --red-700:  #991b1b;

  /* Borrador / en proceso / obsoleto / observación */
  --neutral-50:  #f1f5f9;
  --neutral-100: #e2e8f0;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Brand */
  --color-primary:        var(--teal-700);
  --color-primary-hover:  var(--teal-800);
  --color-primary-active: var(--teal-900);
  --color-primary-soft:   var(--teal-50);
  --color-primary-border: var(--teal-100);
  --color-on-primary:     #ffffff;
  --color-accent:         var(--teal-600);

  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--slate-0);
  --surface-sunken:  var(--slate-100);   /* cloud */
  --surface-raised:  var(--slate-0);
  --surface-inverse: var(--slate-800);
  --surface-hover:   var(--slate-100);
  --surface-selected: var(--teal-50);

  /* Text */
  --text-strong:    var(--slate-700);    /* ink #212B36 */
  --text-body:      var(--slate-600);
  --text-muted:     var(--slate-500);    /* #637381 */
  --text-subtle:    var(--slate-400);
  --text-on-inverse: var(--slate-50);
  --text-link:      var(--teal-700);

  /* Borders / dividers */
  --border-subtle:  var(--slate-200);    /* #E3E8EE */
  --border-default: var(--slate-300);    /* #C4CDD5 inputs */
  --border-strong:  var(--slate-400);
  --border-focus:   var(--teal-700);

  /* Status — surface / border / text / solid quadruplets */
  --status-ok-surface:   var(--green-50);
  --status-ok-border:    var(--green-100);
  --status-ok-text:      var(--green-700);
  --status-ok-solid:     var(--green-500);

  --status-warn-surface: var(--amber-50);
  --status-warn-border:  var(--amber-100);
  --status-warn-text:    var(--amber-700);
  --status-warn-solid:   var(--amber-500);

  --status-bad-surface:  var(--red-50);
  --status-bad-border:   var(--red-100);
  --status-bad-text:     var(--red-700);
  --status-bad-solid:    var(--red-500);

  /* Borrador / en proceso / obsoleto — slate, NOT blue */
  --status-info-surface: var(--neutral-50);
  --status-info-border:  var(--neutral-100);
  --status-info-text:    var(--neutral-700);
  --status-info-solid:   var(--neutral-500);

  /* Focus ring — teal-700 @ 25% */
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.25);
}