/* ============================================================
   BouBot — capa de tokens compartida
   Formato oklch, dark only. Fuente única de verdad.
   ============================================================ */

:root {

  /* ---- Marca -------------------------------------------------
     Un solo acento. Se usa con escasez: CTA primario, wordmark,
     cifras de valor, badges de confianza. Nada más.
     El texto sobre el acento es SIEMPRE oscuro, nunca blanco.  */

  --primary:            oklch(0.881 0.168 94.2);   /* #FCD535 */
  --primary-active:     oklch(0.813 0.165 86.7);   /* #F0B90B — press/hover */
  --primary-disabled:   oklch(0.330 0.055 94.0);
  --primary-ink:        oklch(0.218 0.012 270.8);  /* #181A20 — texto sobre amarillo */

  /* ---- Superficies -------------------------------------------
     La profundidad sale del salto de luminosidad entre canvas y
     card. No hay sombras. No hay gradientes de fondo.           */

  --bg:                 oklch(0.162 0.008 248.3);  /* #0B0E11 — canvas */
  --bg-deep:            oklch(0.140 0.008 248.3);  /* dashboard, un paso más abajo */
  --surface:            oklch(0.254 0.014 253.1);  /* #1E2329 — cards, dropdowns */
  --surface-2:          oklch(0.311 0.017 255.6);  /* #2B3139 — anidado, hover */

  /* ---- Líneas -------------------------------------------------
     La hairline es el token más usado del sistema. Siempre 1px.
     Misma cifra que --surface-2 a propósito: el borde lee como
     un escalón de superficie, no como tinta.                    */

  --line:               oklch(0.311 0.017 255.6);
  --line-strong:        oklch(0.390 0.018 255.0);

  /* ---- Texto --------------------------------------------------
     El cuerpo NO es blanco puro. Blanco puro se reserva para
     titulares de máximo contraste.                              */

  --ink:                oklch(0.942 0.005 258.3);  /* #EAECEF — cuerpo */
  --ink-max:            oklch(1 0 0);              /* titulares */
  --muted:              oklch(0.679 0.024 254.4);  /* #8E99A7 — 6.69:1 sobre --bg, 5.47:1 sobre --surface, 4.54:1 sobre --surface-2 */
  --muted-strong:       oklch(0.796 0.014 258.4);  /* #B7BDC6 — 10.24:1 sobre --bg, 8.37:1 sobre --surface */

  /* ---- Semántica ----------------------------------------------
     Verde y rojo son ESTADO, no marca. Van como color de texto o
     como punto/badge chico. Nunca como fondo de card.           */

  --state-ok:           oklch(0.743 0.171 158.1);  /* recuperado, conectado, activo */
  --state-fail:         oklch(0.654 0.211 18.2);   /* perdido, error, desconectado */
  --state-wait:         oklch(0.683 0.019 256.3);  /* en curso, esperando respuesta */
  --danger:             var(--state-fail);         /* alias: error / desconectado / perdido */
  --focus:              oklch(0.623 0.188 259.8);  /* anillo de foco */

  /* ---- Radios -------------------------------------------------
     Escala apretada a propósito. Casi todo vive entre 6 y 12.
     La pill se reserva para "esta es LA acción de la página".    */

  --r-sm:    4px;    /* badges inline, chips de estado */
  --r-md:    6px;    /* botones, inputs */
  --r-lg:    8px;    /* cards de contenido, search */
  --r-xl:   12px;    /* contenedores elevados, panel de conversación */
  --r-pill: 999px;   /* solo CTA de tope de página */

  /* ---- Espaciado — base 4 ------------------------------------ */

  --s-1:     4px;
  --s-2:     8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    24px;
  --s-6:    32px;
  --s-7:    48px;
  --s-8:    64px;

  /* Bandas verticales. La densa se usa SOLO cuando la banda tiene
     datos vivos adentro; si no, queda apretada y vacía. */
  --band:         96px;
  --band-dense:   80px;

  --container:  1200px;
  --gutter:       24px;

  /* ---- Tipografía ---------------------------------------------
     Dos familias con división funcional estricta:
       Inter      → todo lo editorial
       Geist Mono → todo lo que sea número
     Mezclarlas al revés rompe el carácter.                       */

  --font-text: 'Inter', system-ui, -apple-system, sans-serif;
  --font-num:  'Geist Mono', ui-monospace, monospace;

  --t-hero:      clamp(2.25rem, 6vw, 4rem);   /* 36 → 64px, 700, lh 1.05, ls -0.02em */
  --t-display:   clamp(1.75rem, 4vw, 3rem);   /* 28 → 48px, 700, lh 1.1,  ls -0.015em */
  --t-section:   clamp(1.5rem, 3vw, 2rem);    /* 24 → 32px, 600, lh 1.2 */
  --t-title:     1.25rem;                     /* 20px, 600, lh 1.35 */
  --t-subtitle:  1rem;                        /* 16px, 600, lh 1.4 */
  --t-body:      1rem;                        /* 16px, 400, lh 1.6 */
  --t-small:     0.875rem;                    /* 14px, 400, lh 1.5 */
  --t-caption:   0.75rem;                     /* 12px, 500, lh 1.4 */

  --t-num-hero:  clamp(2rem, 5vw, 3rem);      /* 32 → 48px, 700, tabular */
  --t-num:       1rem;                        /* 16px, 500, tabular */
  --t-num-sm:    0.875rem;                    /* 14px, 500, tabular */

  /* ---- Motion -------------------------------------------------
     Una curva para todo. Sin bounce, sin overshoot.              */

  --dur-fast:   120ms;   /* estados de control */
  --dur-base:   200ms;   /* hover, color, borde */
  --dur-slow:   400ms;   /* reveals, flash de valor */
  --dur-count: 1200ms;   /* count-up de cifras */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
}

/* Todo número tabular por defecto, para que no bailen los dígitos
   mientras cuentan o se actualizan. */
.num,
[data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* :where tiene especificidad 0 y pierde contra `input { outline: none }` de las
   páginas. Esta regla sí gana, que es lo que hace visible el anillo al tabular. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-count: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}