/*
 * tokens.css — IO IT Systems Design Tokens
 * Paleta Opción 5 (aprobada):
 *   Naranja   #fb9c45  · Sky blue  #42c3ff
 *   Aqua      #61e0e0  · Teal      #82bfb7  · Slate  #97a3a9
 */

:root {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     PALETA BASE — 5 colores + derivados de tono
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Naranja (color de marca) */
  --pal-orange:      #fb9c45;
  --pal-orange-dk:   #e07a1f;
  --pal-orange-deep: #b85f10;
  --pal-orange-bg:   #fff4eb;
  --pal-orange-bd:   #ffd4a8;

  /* Sky blue (acción secundaria / grid headers) */
  --pal-sky:         #42c3ff;
  --pal-sky-dk:      #1aa5e8;
  --pal-sky-deep:    #0f7ab5;
  --pal-sky-bg:      #e0f5ff;
  --pal-sky-xbg:     #f0faff;

  /* Aqua / menta (acción positiva / badge Activo) */
  --pal-aqua:        #61e0e0;
  --pal-aqua-dk:     #30b8b8;
  --pal-aqua-bg:     rgba(97, 224, 224, 0.14);

  /* Teal (sidebar, textos de marca) */
  --pal-teal:        #82bfb7;
  --pal-teal-mid:    #4d8b85;
  --pal-teal-dark:   #1e3d3a;
  --pal-teal-deeper: #152d2b;

  /* Slate gray (textos secundarios, bordes) */
  --pal-gray:        #97a3a9;
  --pal-gray-dk:     #68787e;
  --pal-gray-lt:     #d4d9dc;
  --pal-gray-xlt:    #edf2f4;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TOKENS SEMÁNTICOS — mapeados a la paleta
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* Marca → naranja */
  --brand-primary:      var(--pal-orange);
  --brand-primary-dark: var(--pal-orange-dk);
  --brand-primary-bg:   var(--pal-orange-bg);
  --brand-primary-bd:   var(--pal-orange-bd);

  /* Fondos */
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f8f9;
  --bg-tertiary:  var(--pal-gray-xlt);
  --bg-overlay:   rgba(30, 61, 58, 0.08);

  /* Texto */
  --text-primary:   var(--pal-teal-dark);
  --text-secondary: var(--pal-gray-dk);
  --text-tertiary:  var(--pal-gray);

  /* Bordes */
  --border-soft: #e2e8ea;
  --border-med:  var(--pal-gray-lt);

  /* Estados semánticos */
  --success-bg:   var(--pal-aqua-bg);
  --success-text: var(--pal-aqua-dk);
  --warning-bg:   var(--pal-orange-bg);
  --warning-text: var(--pal-orange-deep);
  --danger-bg:    #fcebeb;
  --danger-text:  #791f1f;
  --neutral-bg:   var(--pal-gray-xlt);
  --neutral-text: var(--pal-gray-dk);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SOMBRAS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --shadow-sm:      0 1px 3px  rgba(0, 0, 0, 0.05);
  --shadow-md:      0 2px 10px rgba(0, 0, 0, 0.07);
  --shadow-lg:      0 4px 24px rgba(0, 0, 0, 0.09);
  --shadow-btn:     0 2px 6px  rgba(251, 156, 69, 0.32);
  --shadow-topbar:  0 2px 8px  rgba(251, 156, 69, 0.14);
  --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.12);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     RADIOS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 20px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TIPOGRAFÍA
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   15px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TRANSICIONES
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --transition-fast: 0.13s ease;
  --transition-std:  0.20s ease;
  --transition-slow: 0.30s ease;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Z-INDEX (escala fija para toda la app)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-topbar:  200;
  --z-sidebar: 300;
  --z-modal:   400;
  --z-toast:   600;

  color-scheme: light;
}