/* ============================================================================
   PUENTE v4 · TOKENS — la capa de color, medida y movimiento. Única.
   ----------------------------------------------------------------------------
   Estos valores NO son «parecidos» a los de Kuak Studio: son LOS MISMOS,
   copiados de `kuak-studio/apps/web/src/index.css` §1 (color, radios, espacio,
   sombras) y de `apps/web/src/design-system/tokens.css` (curvas, duraciones,
   blur, z-index). Si Studio cambia su paleta, se vuelve a clonar aquí y no se
   toca ni una regla del resto del CSS.

   REGLA DE ORO: ningún hex suelto fuera de este fichero. Si necesitas un color
   que no está, es que falta un token — no que falte un hex.

   v5 (ago-2026): la web es CLARA por defecto (la corriente de los editores de
   vídeo del sector) y conserva el oscuro como segundo tema. Los tokens de
   color siguen siendo los de Studio; lo que cambia es la ARQUITECTURA (ya no
   hay lienzo negro con paneles: hay página, con un lavado de color detrás del
   hero) y la GEOMETRÍA de la web (botones píldora, tarjetas de 22 px), que se
   declara aquí abajo en «Radios» y «Página» y no se parece a la app a
   propósito: comparten fuente, azul y logo; nada más.
   ========================================================================== */

:root {
  /* ── Superficies ────────────────────────────────────────────────────────
     La arquitectura es «lienzo + paneles flotantes»: --bg-app es el lienzo
     (negro en LOS DOS temas, como en Studio) y los paneles flotan encima con
     8-16 px de aire. La elevación la da el contraste, no la sombra. */
  --bg-app:            #050505;
  --bg-primary:        #ECECEE;
  --bg-card:           #FFFFFF;
  --bg-elev:           #FAFAFB;
  --bg-modal:          #FFFFFF;
  --bg-pill:           rgba(16,16,16,.05);
  --bg-pill-hover:     rgba(16,16,16,.10);
  --bg-active:         rgba(16,16,16,.08);
  --surface-3:         #E4E4E7;
  --divider:           rgba(16,16,16,.10);
  --hairline:          rgba(16,16,16,.05);

  --text-primary:      #1A1A1A;
  --text-secondary:    #616166;
  --text-tertiary:     #8E8E93;
  --text-on-accent:    #FFFFFF;

  --accent-blue:       #2D5BFF;
  --accent-blue-hover: #4870FF;
  --accent-green:      #1FA854;
  --nav-active:        #5B6CFF;
  --color-warning:     #B8730A;
  --color-error:       #E5352B;
  --icon-inactive:     #9A9AA0;
  --overlay:           rgba(0,0,0,.5);
  --focus-border:      color-mix(in srgb, var(--accent-blue) 60%, #FFFFFF);

  /* Degradado de marca — SOLO azules (el violeta se rechazó en Studio). */
  --grad: linear-gradient(135deg, #2D5BFF, #4870FF);

  --tint-blue:    rgba(45,91,255,.10);
  --tint-green:   rgba(31,164,99,.13);
  --tint-amber:   rgba(217,138,15,.14);
  --tint-red:     rgba(229,72,77,.13);
  --tint-neutral: rgba(120,120,128,.13);

  /* Promos: acento propio, fuera del azul de UI, para que una oferta se lea
     como oferta. Idéntico a Studio. */
  --promo-credits: #E8620C;
  --tint-credits:  rgba(232,98,12,.10);
  --promo-plans:   #6E4BFF;
  --tint-plans:    rgba(110,75,255,.10);

  /* Los 6 degradados del muro de shorts del login de Studio, literales. Son la
     firma visual de la marca; se reutilizan aquí como cartel de vídeo cuando
     una pieza real todavía no está disponible. */
  --tile-a: linear-gradient(150deg, #2D5BFF, #6E4BFF);
  --tile-b: linear-gradient(150deg, #1FA463, #2D5BFF);
  --tile-c: linear-gradient(150deg, #6E4BFF, #C13BE6);
  --tile-d: linear-gradient(150deg, #0E7BE0, #14C1B8);
  --tile-e: linear-gradient(150deg, #4870FF, #1FA463);
  --tile-f: linear-gradient(150deg, #7A46FF, #4870FF);

  /* ── Radios ── geometría PROPIA de la web (v5): botones píldora, tarjetas
     22, bloques grandes 28. `--radius-app` es el 8 px de Studio y solo lo usa
     la maqueta del editor del hero, que sí imita a la app. */
  --radius-button: 999px;
  --radius-card:   22px;
  --radius-hero:   28px;
  --radius-notice: 14px;
  --radius-pill:   999px;
  --radius-sm:     10px;
  --radius-app:    8px;

  /* ── Página (v5) ── fondo de la página, banda suave y lavado del hero.
     `--page-bg` NO es `--bg-app`: el lienzo negro de Studio se queda en la
     app; la web tiene página. */
  --page-bg:      #FFFFFF;
  --page-band:    #F5F6F9;
  --page-ink:     #0B0C10;
  --page-wash:    radial-gradient(closest-side, rgba(45,91,255,.16), rgba(110,75,255,.08) 55%, rgba(255,255,255,0) 100%);
  --hairline-strong: rgba(11,12,16,.12);

  /* ── Tipografía ─────────────────────────────────────────────────────────
     La pila es LITERALMENTE la de Studio, en el mismo orden. La decisión de
     fondo: el objetivo es que la web y la app se lean como la misma casa, y
     Studio usa la fuente del sistema de Apple. Poner Inter DELANTE habría
     hecho justo lo contrario (en un Mac, web con Inter y app con SF Pro).

     Inter sí se auto-hospeda (`base.css`, ficheros copiados de Studio), pero
     ocupa la posición que ya tenía en la pila de Studio: cuarta. Consecuencia
     buscada — en Apple gana SF Pro y el navegador NUNCA llega a descargar
     Inter (una familia que no se usa no se pide); en Windows/Android, donde
     Studio pedía «Inter» sin poder servirla, ahora se sirve de verdad. Cero
     peticiones a terceros, cero Google Fonts. */
  --font:         -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-display: var(--font);
  --mono:         ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --text-2xs:  .6875rem;
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --tracking-tight:  -.02em;
  --tracking-caps:   .12em;

  /* ── Espaciado ─────────────── escala de Studio, sin inventar peldaños */
  --space-xs:  3px;
  --space-sm:  6px;
  --space-md:  10px;
  --space-lg:  14px;
  --space-xl:  18px;
  --space-2xl: 28px;
  --space-3xl: 48px;
  --space-4xl: 72px;

  /* ── Layout ─────────────────────────────────────────────────────────────
     La columna de contenido es la MISMA que la de Studio (1060 px dentro de
     un panel de 1120): por eso los titulares caen sobre el mismo eje al
     pasar de la web a la app. */
  --col:        1060px;
  --col-wide:   1120px;
  --col-narrow: 720px;
  --gap-shell:  8px;   /* aire entre el lienzo y los paneles */
  --header-h:   64px;

  /* ── Sombras ───── el shell no lleva; solo menús, modales y hover real */
  --shadow-card:       none;
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.10);
  --shadow-pop:        0 8px 24px rgba(0,0,0,.16);

  /* ── Movimiento ── curvas y tiempos de Studio (design-system/tokens.css) */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-normal:  260ms;
  --dur-slow:    420ms;
  --dur-slower:  700ms;
  --ease-out:    cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --blur-sm: 10px;
  --blur-md: 20px;

  --z-sticky:   100;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    410;
  --z-toast:    500;

  color-scheme: light;
}

[data-theme="dark"],
.panel--dark {
  /* Cosmos 2.0 — el look primario. Lienzo casi negro neutro y paneles en una
     rampa de grises muy apretada; lo cósmico vive solo en los acentos. */
  --bg-app:            #050505;
  --bg-primary:        #0F0F10;
  --bg-card:           #1A1A1C;
  --bg-elev:           #1F1F22;
  --bg-modal:          #141416;
  --bg-pill:           rgba(255,255,255,.05);
  --bg-pill-hover:     rgba(255,255,255,.10);
  --bg-active:         rgba(255,255,255,.15);
  --surface-3:         #363639;
  --divider:           rgba(255,255,255,.10);
  --hairline:          rgba(255,255,255,.05);

  --page-bg:      #0A0B10;
  --page-band:    #101218;
  --page-ink:     #F3F4F8;
  --page-wash:    radial-gradient(closest-side, rgba(45,91,255,.38), rgba(110,75,255,.18) 55%, rgba(10,11,16,0) 100%);
  --hairline-strong: rgba(255,255,255,.14);

  --text-primary:      #F5F5F5;
  --text-secondary:    #ABABAB;
  --text-tertiary:     #737378;

  --accent-blue:       #4870FF;
  --accent-blue-hover: #6B8AFF;
  --accent-green:      #30D158;
  --nav-active:        #7480FF;
  --color-warning:     #FF9F0A;
  --color-error:       #FF5B52;
  --icon-inactive:     #737378;
  --overlay:           rgba(0,0,0,.7);

  --grad: linear-gradient(135deg, #4870FF, #6B8AFF);

  --tint-blue:    rgba(72,112,255,.16);
  --tint-green:   rgba(61,214,140,.14);
  --tint-amber:   rgba(240,163,60,.15);
  --tint-red:     rgba(242,85,90,.15);
  --tint-neutral: rgba(140,143,165,.14);

  --promo-credits: #FF9E47;
  --tint-credits:  rgba(255,158,71,.13);
  --promo-plans:   #9D7BFF;
  --tint-plans:    rgba(157,123,255,.14);

  --shadow-card:       none;
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.35);
  --shadow-pop:        0 8px 24px rgba(0,0,0,.45);

  color-scheme: dark;
}