/* =============================================================
   UCM AI — tokens.css
   Sistema de diseño. Look: «Programa de seminario en negativo».

   Cada color lleva su procedencia. Un token sin origen es un token
   que alguien cambiará por gusto dentro de tres semanas.
   ============================================================= */

:root {

  /* ── TINTA Y PAPEL ──────────────────────────────────────────
     Neutros con 3–5% de croma del ámbar de marca. Neutros
     perfectamente desaturados junto a un acento saturado se leen
     como dos marcas pegadas.                                    */

  --ink-0:        #0B0A09;  /* fondo base. Negro del logo, calentado hacia el ámbar */
  --ink-1:        #121110;  /* superficie alterna: bandas de sección pares */
  --ink-2:        #1A1917;  /* superficie elevada: inputs, fila desplegada */
  --ink-3:        #232120;  /* superficie hover */

  --paper:        #F6F3EC;  /* tinta principal. Blanco del wordmark, calentado. 17.9:1 sobre --ink-0 */
  --paper-2:      rgb(246 243 236 / 0.68);  /* cuerpo. 8.4:1 */
  --paper-3:      rgb(246 243 236 / 0.55);  /* metadatos, roles. 5.2:1 */
  --paper-4:      rgb(246 243 236 / 0.38);  /* SOLO decorativo. Nunca texto. */

  --rule:         rgb(246 243 236 / 0.11);  /* filete de retícula */
  --rule-2:       rgb(246 243 236 / 0.19);  /* filete de énfasis */

  /* ── ACENTO ─────────────────────────────────────────────────
     Dominante + chispa. La chispa aparece 2 veces en toda la
     página: el <em> del h1 y las comillas de la cita de Pichai.  */

  --accent:       #FF914D;  /* naranja del logo UCMAI, sin tocar. 8.8:1 sobre --ink-0 */
  --accent-dim:   rgb(255 145 77 / 0.14);  /* fondo de tag, hover de fila */
  --accent-line:  rgb(255 145 77 / 0.42);  /* borde activo */
  --accent-ink:   #0B0A09;  /* tinta sobre relleno de acento */

  --spark:        #FFDE59;  /* amarillo del logo UCMAI, sin tocar */
  --spark-grad:   linear-gradient(96deg, #FFDE59 0%, #FFA24C 46%, #FF914D 100%);

  /* PRISMA — un degradado por capa, tres paradas, del sistema FITOS
     portado a los dos colores de UCM AI. Barra de seccion y canto
     superior de tarjeta. Nunca relleno de fondo. */
  --prisma:       linear-gradient(90deg, #FF914D 0%, #FFB25C 52%, #FFDE59 100%);
  --prisma-v:     linear-gradient(180deg, #FF914D 0%, #FFC46A 56%, #FFF3E0 100%);

  /* Un degradado por fase del mazo: el degradado del logo repartido
     en cuatro pasos, de naranja profundo a amarillo. Tinta oscura
     encima, como las tarjetas prisma de theovercode.ai. */
  --prisma-1:     linear-gradient(180deg, #C4622A 0%, #FF914D 46%, #FFD9A8 100%);
  --prisma-2:     linear-gradient(180deg, #FF7A2E 0%, #FFA85C 46%, #FFE3BC 100%);
  --prisma-3:     linear-gradient(180deg, #E8A21F 0%, #FFC94D 46%, #FFF1C9 100%);
  --prisma-4:     linear-gradient(180deg, #F5B72E 0%, #FFDE59 46%, #FFFBEA 100%);
  --prisma-ink:   #1A1005;   /* tinta sobre tarjeta prisma */

  --paper-unlit:  rgb(246 243 236 / 0.42);  /* palabra aun sin encender */

  --focus:        #FFC98A;  /* anillo de foco: acento aclarado para separarse del hover */

  /* ── TIPOGRAFÍA ─────────────────────────────────────────────
     Dos familias. Ni una más.                                   */

  --font-display: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Escala tipográfica. Razón ~1.22 en cuerpo, salto brusco a display.
     El rango medio-medio-medio es el olor de la plantilla.        */
  --t-2xs:  0.75rem;      /* 12 — pie de foto, legal */
  --t-xs:   0.8125rem;    /* 13 — metadatos, tags */
  --t-sm:   0.9375rem;    /* 15 — nav, botones, roles */
  --t-base: 1.0625rem;    /* 17 — cuerpo */
  --t-md:   1.1875rem;    /* 19 — cuerpo destacado, lead */
  --t-lg:   clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem);   /* 22→26 — h3 */
  --t-xl:   clamp(1.5rem, 1.16rem + 1.5vw, 2.375rem);   /* 28→38 — h3 grande, cita */
  --t-2xl:  clamp(2rem, 1.16rem + 3.7vw, 3.75rem);       /* 38→60 — h2 */
  --t-3xl:  clamp(3rem, 1.4rem + 7.4vw, 7rem);           /* 48→112 px */
  /* Display de portada: acotado para convivir con el sol a su derecha. */
  --t-display: clamp(2.25rem, 1.05rem + 4.1vw, 4rem);    /* 36→64 px */

  --lh-tight:   0.95;
  --lh-snug:    1.14;
  --lh-normal:  1.42;
  --lh-relaxed: 1.62;

  --tr-display: -0.035em;   /* suelo de tracking -0.04em */
  --tr-title:   -0.022em;
  --tr-body:    -0.005em;
  --tr-label:    0.06em;

  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-black:    800;

  --measure:    47ch;   /* medida de cuerpo 65–75ch. 47ch de Libre Franklin = ~72 caracteres reales, medido sobre el render. */
  --measure-sm: 38ch;

  /* ── ESPACIADO ──────────────────────────────────────────────
     Un solo ritmo en toda la pieza. Base 8.                     */

  --s-0:   0.25rem;   /*  4 */
  --s-1:   0.5rem;    /*  8 */
  --s-2:   0.75rem;   /* 12 */
  --s-3:   1rem;      /* 16 */
  --s-4:   1.5rem;    /* 24 */
  --s-5:   2rem;      /* 32 */
  --s-6:   3rem;      /* 48 */
  --s-7:   4rem;      /* 64 */
  --s-8:   6rem;      /* 96 */
  --s-9:   8rem;      /* 128 */
  --s-10: 11rem;      /* 176 */

  --section-y:  clamp(3.25rem, 5.6vw, var(--s-8));   /* 52 -> 96px. Antes llegaba a 128 y dejaba huecos muertos. */
  --gutter:     clamp(1.25rem, 4.2vw, 3.5rem);
  --grid-max:   1280px;
  --grid-gap:   clamp(1.25rem, 2.4vw, 2.25rem);

  /* ── FORMA ──────────────────────────────────────────────────
     Radios contenidos. 999px sólo en pills.                     */

  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* Una sola sombra en todo el sistema, profunda y difusa.
     Nunca halo de color a offset cero.                          */
  --shadow: 0 28px 72px -20px rgb(0 0 0 / 0.72);

  --nav-h:      88px;   /* pildora flotante: 18 + 52 + 18 */
  --nav-h-sm:   58px;

  /* ── MOVIMIENTO ─────────────────────────────────────────────
     Presupuesto: UN momento autorado (--d-moment). El resto es
     tejido conectivo por debajo de 300ms.                       */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out. El default. */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* Tiempos del sistema FITOS: micro 140 / ui 260 / reveal 620,
     stagger 70ms. El movimiento revela, conecta o transforma. */
  --d-press:   140ms;
  --d-hover:   140ms;
  --d-state:   260ms;
  --d-enter:   620ms;
  --d-moment:  900ms;
  --stagger:    70ms;

  --z-grain:   1;
  --z-dock:    70;
  --z-menu:    80;
  --z-nav:     90;   /* por encima del menu: el boton de cerrar tiene que verse */
  --z-gateway: 100;
}

/* La preferencia del sistema manda sobre cualquier decisión de motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-press: 0.01ms;
    --d-hover: 0.01ms;
    --d-state: 0.01ms;
    --d-enter: 0.01ms;
    --d-moment: 0.01ms;
  }
}