/* ============================================================
   SYMBIO · TOKENS
   Base tomada de DESIGN.md (escala tipográfica, spacing de 6px,
   radios de 24px, void negro) con dos desvíos deliberados:

   · El acento pasa de violeta a AZUL, como pediste.
   · Se agrega una capa de vidrio. DESIGN.md la prohíbe
     ("elements float on black with whitespace alone"), pero tu
     instrucción manda sobre el documento de referencia.
   ============================================================ */

:root {

  /* --- Superficie ------------------------------------------------- */
  --void:        #000000;   /* el negro es material de diseño, no un fallback */

  /* --- Tinta ------------------------------------------------------ */
  --white:       #ffffff;
  --ash:         #9a9a9a;
  --silver:      #bdbdbd;

  /* --- Azul: el acento de la marca --------------------------------
     Tres paradas, de profundo a eléctrico. El cerebro de partículas
     se pinta interpolando entre ellas según la profundidad. */
  --blue-deep:   #1B3BA8;
  --blue:        #4A7DFF;
  --blue-bright: #63C8FF;

  /* Cálido de SYMBIO, heredado de la identidad. Sólo en etiquetas:
     es la tensión cromática contra el azul, nunca una superficie. */
  --warm:        #E0B080;

  /* --- Vidrio -----------------------------------------------------
     Un panel translúcido sobre negro puro no se lee como vidrio: se
     lee como un rectángulo gris. Lo que lo hace vidrio es el borde
     superior más claro que el inferior (simula el canto captando luz)
     sumado a los resplandores azules del fondo, que le dan algo que
     refractar. */
  --glass-bg:      rgba(255,255,255,.032);
  --glass-bg-hi:   rgba(255,255,255,.055);
  --glass-line:    rgba(255,255,255,.10);
  --glass-line-hi: rgba(255,255,255,.20);
  --glass-blur:    18px;

  /* --- Tipografía -------------------------------------------------
     DESIGN.md especifica PPNeueMontreal y nombra Inter como
     sustituto. La jerarquía viene de la escala y del tracking
     negativo, nunca del peso: los titulares van en 400, jamás bold,
     y el cuerpo en 200. */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --w-extralight: 200;
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;

  /* Escala fluida sobre los tamaños de DESIGN.md.
     display 113 · heading-lg 78 · heading 48 · body 18 */
  --t-display:  clamp(3.05rem, 7.6vw, 7.06rem);
  --t-h-lg:     clamp(2.35rem, 5.0vw, 4.88rem);
  --t-h:        clamp(1.75rem, 3.0vw, 3.00rem);
  --t-sub:      clamp(1.35rem, 2.1vw, 2.25rem);
  --t-body:     clamp(1.0rem, 1.15vw, 1.125rem);
  --t-nav:      .875rem;
  --t-caption:  .75rem;

  --lh-display: 1.06;
  --lh-head:    1.12;
  --lh-body:    1.55;

  /* -0.04em en todo lo que pase de 42px, según la referencia */
  --tr-display: -.042em;
  --tr-head:    -.035em;
  --tr-nav:     .025em;
  --tr-label:   .18em;

  /* --- Spacing · base 6px ----------------------------------------- */
  --s-6:   6px;   --s-12:  12px;  --s-18:  18px;  --s-24:  24px;
  --s-30:  30px;  --s-36:  36px;  --s-48:  48px;  --s-60:  60px;
  --s-96:  96px;  --s-120: 120px;

  --section-y: clamp(4.5rem, 10vw, 7.5rem);
  --shell:     1280px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radios ----------------------------------------------------- */
  --r:      24px;
  --r-sm:   14px;
  --r-full: 9999px;

  /* --- Movimiento -------------------------------------------------- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.30,1);
  --d-fast:   .22s;
  --d-mid:    .45s;
  --d-slow:   .9s;

  /* --- Capas ------------------------------------------------------- */
  --z-glow:   0;
  --z-canvas: 1;
  --z-body:   2;
  --z-nav:    50;
}

:root { color-scheme: dark; }