/* ============================================================================
   KAORDIC · TOKENS DE DISEÑO
   ----------------------------------------------------------------------------
   Único archivo que necesitas tocar para cambiar la apariencia global:
   colores, tipografía, escalas, forma y movimiento.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- COLOR ---------------------------------------------------------------
     Negros con matiz frío, no grises neutros. Un gris plano (#191919) es lo
     que hace que un sitio oscuro se sienta de plantilla; el matiz azulado le
     da temperatura de instrumento.                                           */

  --k-bg:          #07090C;   /* fondo base                                   */
  --k-bg-alt:      #0A0D12;   /* bandas alternas                              */
  --k-surface:     #0F131A;   /* tarjetas y paneles                           */
  --k-surface-2:   #151B24;   /* elevación y hover                            */

  --k-text:        #E9EEF4;   /* 17.1:1 sobre el fondo                        */
  --k-text-muted:  #96A3B4;   /*  7.8:1                                       */
  /* No lo bajes de aquí. Este tono viste las etiquetas del formulario y los
     enlaces del menú; por debajo de #7C8898 el contraste cae del mínimo AA
     (4.5:1) y esos textos dejan de ser legibles para mucha gente.            */
  --k-text-dim:    #7C8898;   /*  5.5:1                                       */

  --k-accent:      #0BB4FF;   /* ACENTO ÚNICO de la marca                     */
  --k-accent-hi:   #5CD1FF;   /* sólo para hover de botón sólido              */
  --k-accent-ink:  #04121A;   /* texto sobre el acento                        */
  --k-accent-06:   rgba(11, 180, 255, .06);
  --k-accent-12:   rgba(11, 180, 255, .12);
  --k-accent-28:   rgba(11, 180, 255, .28);
  --k-accent-55:   rgba(11, 180, 255, .55);

  /* --- RED DE HEXÁGONOS DEL HERO -----------------------------------------
     Las caras son opacas y tranquilas; sólo las ranuras perimetrales cambian
     de intensidad cuando su franja cruza el centro del viewport.             */
  --k-hex-face:            rgba(19, 25, 33, .78);
  --k-hex-face-alt:        rgba(12, 17, 23, .88);
  --k-hex-seam:            rgba(4, 8, 13, .90);
  --k-hex-seam-active:     #0BB4FF;
  --k-hex-seam-active-opacity: .92;
  --k-hero-quiet:          rgba(7, 9, 12, .94);
  --k-logo-silver:         #D7D9D8;

  /* Las líneas llevan el mismo matiz frío que el fondo */
  --k-line:        rgba(146, 178, 214, .13);
  --k-line-2:      rgba(146, 178, 214, .24);

  /* --- TIPOGRAFÍA -----------------------------------------------------------
     Dos familias, no tres:
       display -> Space Grotesk. Titulares y TODA la interfaz pequeña
                  (etiquetas, botones, menú, pestañas, campos).
       texto   -> Outfit. Párrafos y lectura corrida.

     Antes había una monoespaciada en MAYÚSCULAS con tracking amplio para las
     etiquetas. Ese combo es el sello visual de plantilla "tech": se quitó y la
     interfaz pasó a Space Grotesk en caja normal, que además la hermana con
     los titulares y ahorra una familia de carga.                              */

  --k-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --k-font:         'Outfit', 'Segoe UI', sans-serif;

  --k-fs-display: clamp(2.9rem, 7vw, 6.4rem);   /* h1 del hero                */
  --k-fs-h2:      clamp(2.1rem, 4.4vw, 3.6rem);
  --k-fs-h3:      clamp(1.35rem, 2.1vw, 1.75rem);
  --k-fs-lead:    clamp(1.05rem, 1.3vw, 1.2rem);
  --k-fs-body:    1rem;
  --k-fs-small:   .9375rem;
  --k-fs-micro:   .8125rem;
  --k-fs-tag:     .875rem;    /* etiquetas y elementos de interfaz            */
  --k-fs-ui:      .9375rem;   /* menú, botones                                */

  /* Tracking casi neutro. El tracking abierto sólo tiene sentido en versales,
     y aquí ya no hay versales. */
  --k-track-tag:  .005em;

  /* --- RITMO --------------------------------------------------------------- */

  --k-container:  1240px;
  --k-gutter:     clamp(1.25rem, 4vw, 3rem);
  /* Ahora que los recuadros llevan imagen, las secciones ya no necesitan tanto
     aire: con 10rem quedaban planchas de negro entre bloque y bloque. */
  --k-section-y:  clamp(4rem, 7vw, 6.5rem);
  --k-nav-h:      74px;

  /* --- FORMA ---------------------------------------------------------------
     REGLA: ángulos rectos en todo. La única forma no rectangular es el corte
     diagonal (chamfer) y se reserva a los elementos de acción: botones y
     píldoras. Mezclar bordes redondeados con este sistema lo rompe.          */

  --k-chamfer:  10px;         /* tamaño del corte diagonal                    */
  --k-r-card:   0;            /* tarjetas y paneles: esquina viva             */
  --k-r-field:  0;            /* campos de formulario                         */

  /* Corte en las dos esquinas opuestas, la firma de forma de la marca */
  --k-clip: polygon(
    var(--k-chamfer) 0, 100% 0,
    100% calc(100% - var(--k-chamfer)), calc(100% - var(--k-chamfer)) 100%,
    0 100%, 0 var(--k-chamfer)
  );

  /* --- TEXTURA -------------------------------------------------------------
     Rejilla técnica de fondo. Subir la opacidad la vuelve decorativa y
     ensucia; a este nivel sólo da profundidad.                               */

  --k-grid-size:    72px;
  --k-grid-color:   rgba(146, 178, 214, .045);

  /* --- MOVIMIENTO ---------------------------------------------------------- */

  --k-ease:     cubic-bezier(.22, 1, .36, 1);
  --k-ease-hud: cubic-bezier(.65, 0, .35, 1);
  --k-t-fast:   .18s var(--k-ease);
  --k-t-base:   .4s var(--k-ease);
  --k-t-slow:   .9s var(--k-ease);
}