/* tokens.css — sistema de diseño SOLUFLEX
   Paleta corporativa:
     - Pantone 298C  #40b4e5  (celeste, acento claro / focus ring / links suaves)
     - Pantone 2925C #009add  (azul, primary de marca: botones, links activos)
     - Pantone 424C  #707170  (gris, texto base y muted)
   Tokens CSS para retunear el portal sin tocar componentes individuales.
   Modo oscuro vía [data-bs-theme="dark"]. */

:root,
:root[data-bs-theme="light"] {
  /* Neutrals — escala derivada del gris corporativo Pantone 424C (#707170).
     50–300: fondos y bordes; 500–800: texto. */
  --color-neutral-50:  hsl(60, 2%, 98%);
  --color-neutral-100: hsl(60, 2%, 95%);
  --color-neutral-200: hsl(60, 2%, 90%);
  --color-neutral-300: hsl(60, 2%, 82%);
  --color-neutral-400: hsl(60, 2%, 67%);
  --color-neutral-500: hsl(60, 2%, 45%);
  --color-neutral-600: hsl(60, 2%, 36%);
  --color-neutral-700: hsl(60, 2%, 26%);
  --color-neutral-800: hsl(60, 3%, 18%);
  --color-neutral-900: hsl(60, 4%, 12%);

  /* Primary corporativo: del celeste Pantone 298C al azul Pantone 2925C.
     50–300 = tints claros del 298; 400–500 = 298 saturado;
     600–900 = 2925 y sus derivados más oscuros. */
  --color-primary-50:  hsl(196, 80%, 96%);
  --color-primary-100: hsl(196, 80%, 90%);
  --color-primary-200: hsl(196, 75%, 80%);
  --color-primary-300: hsl(196, 70%, 70%);
  --color-primary-400: #40b4e5; /* Pantone 298C */
  --color-primary-500: hsl(196, 75%, 55%);
  --color-primary-600: #009add; /* Pantone 2925C */
  --color-primary-700: hsl(200, 95%, 38%);
  --color-primary-800: hsl(200, 90%, 30%);
  --color-primary-900: hsl(200, 85%, 22%);

  /* Semánticos */
  --color-success: #16a34a;
  --color-success-bg: hsl(142, 71%, 95%);
  --color-warning: #d97706;
  --color-warning-bg: hsl(38, 92%, 95%);
  --color-danger:  #dc2626;
  --color-danger-bg:  hsl(0, 86%, 96%);
  --color-info:    var(--color-primary-600);
  --color-info-bg:    hsl(196, 85%, 95%);

  /* Fondos y surfaces (light) */
  --color-bg:        var(--color-neutral-50);
  --color-surface:   #ffffff;
  --color-surface-2: var(--color-neutral-100);
  --color-surface-3: var(--color-neutral-200);
  --color-border:    var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-text:      var(--color-neutral-800);
  --color-text-muted:var(--color-neutral-600);
  --color-text-subtle: var(--color-neutral-500);
  --color-text-inverse: #ffffff;

  /* Fondo de inputs (form-control/form-select). En light coincide con la
     superficie (blanco sobre tarjeta blanca + borde); en dark se sube un tono
     para que los campos se distingan de la tarjeta que los contiene. */
  --color-input-bg:  var(--color-surface);

  /* Marca del portal */
  --color-brand: var(--color-primary-600);
  --color-brand-hover: var(--color-primary-700);

  /* Tipografía */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Espaciado (4pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radios */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* Sombras — tono neutro cálido (60 3%) para mantener coherencia con grises corporativos */
  --shadow-sm: 0 1px 2px 0 hsl(60 3% 12% / 0.06);
  --shadow-md: 0 4px 12px -2px hsl(60 3% 12% / 0.10);
  --shadow-lg: 0 12px 32px -8px hsl(60 3% 12% / 0.16);
  /* Focus ring: celeste Pantone 298C, baja opacidad */
  --shadow-ring: 0 0 0 3px hsl(196 75% 55% / 0.30);

  /* Transiciones */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* Layout */
  --layout-sidebar-width: 260px;
  --layout-sidebar-collapsed-width: 64px;
  --layout-navbar-height: 60px;
  --layout-content-max: 1400px;
}

/* Override dark */
:root[data-bs-theme="dark"] {
  --color-bg:        hsl(200, 14%, 11%);
  --color-surface:   hsl(200, 12%, 14%);
  --color-surface-2: hsl(200, 10%, 18%);
  --color-surface-3: hsl(200, 10%, 22%);
  --color-border:    hsl(200, 8%, 22%);
  --color-border-strong: hsl(200, 8%, 30%);
  --color-text:      hsl(60, 4%, 95%);
  --color-text-muted:hsl(60, 3%, 75%);
  --color-text-subtle: hsl(60, 3%, 60%);

  --color-success-bg: hsl(142, 50%, 14%);
  --color-warning-bg: hsl(38, 60%, 16%);
  --color-danger-bg:  hsl(0, 60%, 16%);
  --color-info-bg:    hsl(196, 50%, 18%);

  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.30);
  --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.50);
  --shadow-ring: 0 0 0 3px hsl(196 75% 55% / 0.40);

  /* Inputs un tono más claros que la tarjeta (surface 14%): en dark los
     form-control quedaban del MISMO color que la card y "no se distinguían"
     (p.ej. campos autocompletados al procesar el XML del registro). */
  --color-input-bg: var(--color-surface-2);
}