/* ============================================================
   REBUILD — Design System v1
   Landing (rebuild-landing · CSS plano, sin build step)
   Pegar en :root del <style> embebido de index.html
   y BORRAR el bloque :root viejo completo.
   ============================================================ */

:root {
  /* --- Superficies --- */
  --color-canvas:        #121212;  /* fondo base */
  --color-surface:       #1b1b1b;  /* card, panel */
  --color-surface-2:     #232323;  /* card anidada, fila alterna, input */
  --color-line:          #2e2e2c;  /* divisor / borde decorativo */
  --color-line-control:  #707068;  /* borde de TODO control: input, botón secundario, chip, checkbox */

  /* --- Texto --- */
  --color-ink:           #ece9e4;  /* 15.1:1 sobre canvas */
  --color-ink-muted:     #8f8b85;  /*  5.5:1 sobre canvas */
  /* NO existe un tercer gris. El #565c63 viejo no tiene sucesor. */

  /* --- Ember · acción (nunca dato, nunca estado) --- */
  --color-accent:        #bf5b26;  /* marca, relleno gráfico, borde, indicador. NUNCA fondo de texto */
  --color-accent-strong: #a84e1f;  /* fondo de botón primario en reposo, con #fff (5.56:1) */
  --color-accent-hover:  #b35420;  /* hover del primario, con #fff (4.99:1) */
  --color-accent-press:  #93441a;  /* active del primario, con #fff (6.81:1) */
  --color-accent-tint:   #e08a4f;  /* texto de acento sobre oscuro: enlaces, botón ghost (7.1:1) */

  /* --- Verdín · señal (nunca clicable) --- */
  --color-signal:        #45a08f;  /* dato, progreso, output de AI */
  --color-signal-hover:  #4dab99;  /* borde/punto en hover — requisito de gráfico 3:1 */
  --color-signal-press:  #3f9384;
  --color-signal-dim:    #1e2624;  /* fondo tenue de tile de dato y de chip elegido */

  /* --- Semántica (sólo error en la landing) --- */
  --color-stop:          #d65c5c;  /* texto, ícono y borde de error. NO es relleno */

  /* --- Foco y capa --- */
  --color-focus:         #f2efe9;
  --color-scrim:         rgb(0 0 0 / .62);

  /* --- Espaciado · nueve paradas autorizadas (grilla de 4) --- */
  --space-xxs:      4px;
  --space-xs:       8px;
  --space-sm:      12px;
  --space-md:      16px;
  --space-lg:      24px;
  --space-xl:      32px;
  --space-xxl:     48px;
  --space-xxxl:    64px;
  --space-section: 96px;  /* sección a sección en desktop */

  /* --- Radios · el rol fija el radio, no el tamaño --- */
  --radius-control:   6px;   /* botón, input, chip, checkbox */
  --radius-card:     10px;   /* card, tile de dato, banner */
  --radius-container:16px;   /* bloque signature, modal, bottom sheet */
  /* excepción de forma: 999px sólo en píldoras (chip del bloque) y puntos de estado */

  /* --- Elevación · cero, salvo overlay --- */
  --shadow-overlay: 0 -12px 40px rgb(0 0 0 / .55);

  /* --- Motion --- */
  --motion-state:   120ms;  /* hover, active, foco, chip */
  --motion-content: 220ms;  /* contenido que se recompone (bloque signature) */
  --motion-enter:   320ms;  /* algo que entra o sale de pantalla */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);

  /* --- Medida --- */
  --maxw: 1060px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-state:   1ms;
    --motion-content: 1ms;
    --motion-enter:   1ms;
  }
}

/* ============================================================
   Receta de foco — obligatoria, idéntica en las dos superficies.
   Va en box-shadow (no en outline) para poder llevar la línea
   interior de 1px que separa el anillo del objeto.
   ============================================================ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-focus),
    0 0 0 3px var(--color-canvas) inset;
}