/* Segtelco — tokens del sistema visual. UNICO archivo con valores de color.

   Opcion D: el ROJO es la marca, el VERDE es estado operativo, el GRAFITO es la
   base. Nunca compiten porque nunca ocupan el mismo rol. El rojo sale del
   logotipo entregado (vector de un solo path).

   Dos temas completos (claro por defecto, oscuro por toggle). Los acentos de
   marca NO cambian entre temas: un acento que cambia es un acento debil.
   La banda "ink" (seccion de servicio administrado y cierre) es oscura en los
   dos temas; en oscuro se eleva para que siga leyendose como banda aparte. */

:root {
  /* ── marca — constante en ambos temas ────────────────── */
  --rojo-700:  #B3141C;
  --rojo-600:  #C8151D;
  --rojo-500:  #EB1E27;   /* color del logotipo */
  --rojo-300:  #F98289;
  --rojo-100:  #FDE4E5;

  /* ── estado operativo: solo indicadores, nunca decorativo ── */
  --verde-600: #0E9455;
  --verde-500: #12B76A;
  --verde-300: #6CE9A6;
  --ambar-500: #F5A524;

  /* ── grafito ─────────────────────────────────────────── */
  --grafito-950: #0A0D12;
  --grafito-900: #101720;
  --grafito-850: #131C27;
  --grafito-800: #1B2430;
  --grafito-700: #2A3542;

  --n-0:   #FFFFFF;
  --n-50:  #F7F9FC;
  --n-100: #EEF2F7;
  --n-200: #DDE3EC;
  --n-400: #8A95A4;
  --n-500: #667085;
  --n-700: #374151;
  --n-900: #0F1320;

  /* ── tipografia ──────────────────────────────────────── */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrainsMonoVar', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── escala ──────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --gutter: 24px;
  --container: 1200px;
  --header-h: 100px;
  --section-py: 104px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── TEMA CLARO (defecto) ──────────────────────────────── */
:root, :root[data-theme="light"] {
  --bg:             var(--n-0);
  --bg-soft:        var(--n-50);
  --surface:        var(--n-0);
  --surface-2:      var(--n-50);
  --fg:             var(--n-700);
  --fg-strong:      var(--n-900);
  --fg-muted:       var(--n-500);
  --border:         var(--n-200);
  --hairline:       rgba(10,13,18,0.07);
  --accion:         var(--rojo-500);
  --accion-hover:   var(--rojo-600);
  /* El BOTON no puede usar el rojo de marca: blanco sobre --rojo-500 da 4.0:1 y
     WCAG AA pide 4.5:1 para texto normal (Lighthouse lo marca). El rojo puro
     queda para logo, lineas e indicadores; el relleno del boton usa rojo-600,
     que con blanco da 5.4:1. Vale igual en los dos temas. */
  --boton:         var(--rojo-600);
  --boton-hover:   var(--rojo-700);
  --accion-text:    var(--rojo-600);   /* rojo-500 sobre blanco queda al limite */
  --accion-wash:    var(--rojo-100);
  --estado:         var(--verde-600);
  --estado-wash:    rgba(18,183,106,0.10);
  --estado-borde:   rgba(18,183,106,0.30);
  --sombra:         0 16px 40px rgba(10,13,18,0.10);
  --sombra-sutil:   0 2px 10px rgba(10,13,18,0.05);
  --scrim:          rgba(10,13,18,0.55);
  --header-bg:      rgba(255,255,255,0.86);

  /* banda oscura permanente */
  --ink-bg:         var(--grafito-950);
  --ink-bg-2:       var(--grafito-900);
  --ink-fg:         var(--n-0);
  --ink-fg-mut:     rgba(255,255,255,0.62);
  --ink-border:     rgba(255,255,255,0.11);
  --ink-surface:    rgba(255,255,255,0.04);
}

/* ── TEMA OSCURO ───────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:             var(--grafito-950);
  --bg-soft:        var(--grafito-900);
  /* La superficie tiene que quedar POR ENCIMA de bg-soft: si es el mismo
     grafito, las tarjetas sobre una seccion --soft desaparecen en el fondo. */
  --surface:        var(--grafito-850);
  --surface-2:      var(--grafito-800);
  --fg:             rgba(255,255,255,0.80);
  --fg-strong:      var(--n-0);
  --fg-muted:       rgba(255,255,255,0.55);
  --border:         rgba(255,255,255,0.11);
  --hairline:       rgba(255,255,255,0.07);
  --accion:         var(--rojo-500);
  --accion-hover:   var(--rojo-300);
  /* El BOTON no puede usar el rojo de marca: blanco sobre --rojo-500 da 4.0:1 y
     WCAG AA pide 4.5:1 para texto normal (Lighthouse lo marca). El rojo puro
     queda para logo, lineas e indicadores; el relleno del boton usa rojo-600,
     que con blanco da 5.4:1. Vale igual en los dos temas. */
  --boton:         var(--rojo-600);
  --boton-hover:   var(--rojo-700);
  --accion-text:    var(--rojo-300);   /* rojo-600 sobre grafito no alcanza */
  --accion-wash:    rgba(235,30,39,0.14);
  --estado:         var(--verde-300);
  --estado-wash:    rgba(18,183,106,0.14);
  --estado-borde:   rgba(18,183,106,0.34);
  --sombra:         0 16px 40px rgba(0,0,0,0.55);
  --sombra-sutil:   0 2px 10px rgba(0,0,0,0.35);
  --scrim:          rgba(4,6,10,0.62);
  --header-bg:      rgba(10,13,18,0.82);

  /* en oscuro la banda se ELEVA, si no desaparece contra el fondo */
  --ink-bg:         var(--grafito-850);
  --ink-bg-2:       var(--grafito-800);
  --ink-fg:         var(--n-0);
  --ink-fg-mut:     rgba(255,255,255,0.62);
  --ink-border:     rgba(255,255,255,0.13);
  --ink-surface:    rgba(255,255,255,0.05);
}