/* IFQ color system — from the official brand guide.
   PRINCIPAL  Azul profundo #001f4a — confianza, agua, tecnología, profesionalismo
   SECUNDARIO Blanco #ffffff · Gris acero #787879 — limpieza, equilibrio, neutralidad
   ACENTO     Naranja #f06c18 — energía, seguridad, acción
   Use navy for structure/trust, orange sparingly for action, steel for neutral UI. */
:root {
  /* ---- Brand primitives ---- */
  --navy-900: #00112a;
  --navy-800: #001f4a; /* brand PRINCIPAL */
  --navy-700: #0a2f63;
  --navy-600: #16407d;
  --navy-500: #2d5278; /* steely blue — links / secondary emphasis */
  --navy-300: #7d93b3;
  --navy-100: #e5ebf3;
  --navy-50:  #f2f5fa;

  --orange-700: #c4530f;
  --orange-600: #d95c10;
  --orange-500: #f06c18; /* brand ACENTO */
  --orange-400: #f78a45;
  --orange-200: #fbc7a2;
  --orange-100: #fde8db;

  --steel-900: #2b2b2c;
  --steel-700: #4a4a4b;
  --steel-600: #5f5f60;
  --steel-500: #787879; /* brand gris acero */
  --steel-400: #9a9a9b;
  --steel-300: #c7c7c8;
  --steel-200: #e2e2e3;
  --steel-100: #f1f1f2;
  --steel-50:  #f8f8f9;

  --white: #ffffff;

  /* ---- Semantic / functional status ---- */
  --green-500: #2e7d5b;
  --amber-500: #e0a021;
  --red-500:   #c0392b;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-primary:        var(--navy-800);
  --color-primary-hover:  var(--navy-700);
  --color-primary-active: var(--navy-900);
  --color-accent:         var(--orange-500);
  --color-accent-hover:   var(--orange-600);
  --color-accent-active:  var(--orange-700);

  --color-bg:            var(--white);
  --color-surface:       var(--white);
  --color-surface-2:     var(--steel-50);
  --color-surface-3:     var(--steel-100);
  --color-surface-inverse: var(--navy-800);
  --color-surface-tint:  var(--navy-50);

  --color-text:          #17233a;      /* deep navy-ink body */
  --color-text-strong:   var(--navy-900);
  --color-text-muted:    var(--steel-500);
  --color-text-subtle:   var(--steel-400);
  --color-text-inverse:  var(--white);
  --color-text-on-accent: var(--white);

  --color-border:        var(--steel-200);
  --color-border-strong: var(--steel-300);
  --color-border-inverse: rgba(255,255,255,0.18);

  --color-link:          var(--navy-600);
  --color-link-hover:    var(--orange-600);

  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--navy-600);

  --color-focus-ring: rgba(240,108,24,0.40); /* orange focus */
  --color-overlay: rgba(0,17,42,0.55);       /* navy scrim */
}