/* ============================================================
   FLUXO · Tokens
   Todo el sistema visual se define acá. Ningún otro archivo
   debería tener un color, un tamaño de fuente o un espaciado
   escrito a mano.
   ============================================================ */

/* ── Tipografías ──────────────────────────────────────────────
   Variables: un archivo por familia cubre todos los pesos.
   Servidas desde nuestro dominio, no desde Google.           */

@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Color ──────────────────────────────────────────────────
     Los neutros tienen una leve desviación al azul para que el
     fondo no lea como gris de plantilla.                      */
  --bg:           #070A11;
  --bg-2:         #0A0F18;
  --surface:      #0F1520;
  --surface-2:    #141C2A;
  --surface-hi:   #1A2434;

  --line:         rgba(140, 170, 220, .11);
  --line-2:       rgba(140, 170, 220, .20);
  --line-hi:      rgba(90, 180, 255, .45);

  --text:         #E9EFF8;
  --muted:        #8B98AE;
  --dim:          #5B6779;

  /* Acento de marca, tomado del logo */
  --cyan:         #38B6FF;
  --blue:         #1E7BE8;
  --violet:       #6C63E8;
  --grad:         linear-gradient(115deg, var(--cyan), var(--violet));
  --grad-soft:    linear-gradient(115deg, rgba(56,182,255,.14), rgba(108,99,232,.14));

  /* Semánticos: estados dentro de datos, no son el acento */
  --ok:           #4ADE80;
  --warn:         #F5B942;
  --bad:          #F56565;

  /* ── Tipografía ─────────────────────────────────────────── */
  --display:      'Syne', system-ui, -apple-system, sans-serif;
  --body:         'DM Sans', system-ui, -apple-system, sans-serif;

  /* Escala fija. Fuera de esta lista no hay tamaños. */
  --t-hero:       clamp(2.5rem, 4.8vw, 3.75rem);
  --t-h2:         clamp(2rem, 4.6vw, 3.5rem);
  --t-h3:         clamp(1.25rem, 2vw, 1.5rem);
  --t-h4:         1.0625rem;
  --t-lead:       clamp(1rem, 1.4vw, 1.1875rem);
  --t-body:       1rem;
  --t-small:      .875rem;
  --t-label:      .6875rem;

  /* ── Espaciado ──────────────────────────────────────────────
     Escala de 8. Cambiar --pad-section cambia el ritmo de todo
     el sitio de una sola vez.                                 */
  --s-1:  .5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  3rem;
  --s-6:  4rem;
  --s-7:  6rem;

  --pad-section:  clamp(5rem, 10vw, 8.5rem);
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --maxw:         1240px;
  --maxw-text:    62ch;

  /* ── Otros ──────────────────────────────────────────────── */
  --r-sm:         8px;
  --r-md:         14px;
  --r-lg:         20px;
  --r-pill:       999px;

  --nav-h:        84px;

  --ease:         cubic-bezier(.22, .61, .36, 1);
  --dur:          .32s;

  --z-nav:        100;
  --z-menu:       200;

  color-scheme: dark;
}