/* ============================================================================
   Anime Studio - tokens.css
   Sistema de diseno: unica fuente de verdad para color, tipografia, espaciado,
   radios, sombras, transiciones, z-index y metricas de layout.

   Reglas de uso para el resto del equipo:
   - Ningun otro archivo CSS deberia escribir un color literal: todo sale de aqui.
   - El tema oscuro es el de por defecto (`:root`).
   - `[data-theme="light"]` fuerza claro. `[data-theme="auto"]` sigue al sistema.
   - Los controles usan `--ctrl-h-cur`, que vale `--ctrl-h` con raton y
     `--ctrl-h-touch` con punteros gruesos (tactil).

   ---------------------------------------------------------------------------
   LENGUAJE VISUAL

   La herramienta es un taller de dibujo: lo que tiene que brillar es el lienzo,
   no la interfaz. De ahi tres decisiones que conviene respetar al anadir CSS:

   1. JERARQUIA POR SUPERFICIE, NO POR BORDE. Los paneles se distinguen por su
      fondo y por el aire que los rodea. `--bd` es casi invisible a proposito:
      un borde solo aparece donde de verdad hace falta separar dos cosas del
      mismo tono. Nada de cajas dentro de cajas.

   2. UN SOLO ACENTO, USADO POCO. El acento marca lo activo y lo interactivo, y
      nada mas. Si todo lleva acento, no destaca nada. `--accent-2` es su pareja
      para degradados y para el segundo plano de un grafico; no para botones.

   3. EL ACENTO SE DERIVA DE TRES CANALES HSL (`--accent-h/s/l`). Cambiando la
      tonalidad se recalculan hover, activo, anillo de foco, version suave y
      degradado, todo coherente. Es lo que permite que el usuario elija su color
      sin que nadie tenga que mantener doce variables a mano.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Canal del acento ----------------------------------------------------
     Personalizable: `settings.accentHue` reescribe --accent-h en <html>.
     Todo lo demas del acento se calcula a partir de aqui. */
  --accent-h: 258;
  --accent-s: 92%;
  --accent-l: 66%;

  /* --- Superficies (0 = mas al fondo, 4 = mas elevada / mas contraste) -----
     Negros frios y profundos, con saltos cortos entre niveles: el contraste
     fuerte se reserva para el lienzo, que es el protagonista. */
  --s-0: #0b0d12;   /* fondo de la aplicacion */
  --s-1: #11141b;   /* paneles, barras */
  --s-2: #171b24;   /* elementos elevados, cabeceras de panel, dialogos */
  --s-3: #1f242f;   /* relleno de controles */
  --s-4: #2a313e;   /* hover / estado activo de controles */
  --s-hi: #38414f;  /* separadores fuertes, tiradores de redimension */

  /* --- Bordes --------------------------------------------------------------
     Deliberadamente tenues. La separacion la hace el fondo y el espacio. */
  --bd-soft: #161a22;
  --bd: #222835;
  --bd-strong: #333c4b;

  /* --- Texto -------------------------------------------------------------- */
  --fg: #eaeef5;
  --fg-dim: #a7b1c0;
  /* Texto secundario pequeno (pistas de campo, atajos de menu, marcadores de
     posicion). Comprobado sobre las superficies oscuras: 7.1:1 sobre --s-0,
     6.6:1 sobre --s-1, 6.1:1 sobre --s-2 y 5.4:1 sobre --s-3, por encima del
     minimo AA de 4.5:1. Sobre --s-4 (relleno de hover) baja a 4.3:1: ahi no se
     pinta texto mute, los controles en hover usan --fg o --accent-fg. */
  --fg-mute: #8e99a9;
  --fg-inv: #0b0d12;

  /* --- Acento --------------------------------------------------------------
     Violeta electrico. Derivado de los canales de arriba. */
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 7%));
  --accent-active: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 9%));
  --accent-fg: #ffffff;
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.15);
  --accent-soft-hover: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.26);
  --accent-ring: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 10%));
  /* Pareja del acento, 60 grados por delante: cian. Solo para degradados y
     para el segundo color de un grafico. */
  --accent-2: hsl(calc(var(--accent-h) + 68) 88% 62%);
  --accent-2-soft: hsl(calc(var(--accent-h) + 68) 88% 62% / 0.16);
  /* Degradado de marca. Titulares, barra de progreso, detalles. Nunca fondos
     grandes: cansa y compite con el dibujo. */
  --accent-grad: linear-gradient(135deg,
                 hsl(var(--accent-h) var(--accent-s) var(--accent-l)),
                 hsl(calc(var(--accent-h) + 68) 88% 62%));
  /* Halo tenue para el elemento activo. Sustituye a los bordes gruesos. */
  --accent-glow: 0 0 0 1px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.55),
                 0 0 18px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.22);

  /* --- Estados ------------------------------------------------------------ */
  --ok: #2fd08a;
  --ok-soft: rgba(47, 208, 138, 0.15);
  --warn: #f0b429;
  --warn-soft: rgba(240, 180, 41, 0.15);
  --err: #ff5d63;
  --err-soft: rgba(255, 93, 99, 0.15);
  --info: var(--accent);
  --info-soft: var(--accent-soft);

  /* --- Lienzo --------------------------------------------------------------
     El fondo del area de trabajo es casi negro para que el lienzo blanco
     recorte con fuerza. Es el unico sitio donde se busca contraste maximo. */
  --canvas-bg: #07090d;
  --canvas-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5);
  --checker-a: #262c36;
  --checker-b: #1e232c;
  --guide: var(--accent);
  --marquee-a: #ffffff;
  --marquee-b: #000000;

  /* --- Scrollbars ----------------------------------------------------------
     Finas y sin pista: aparecen solo como una linea sobre el contenido. */
  --sb-size: 8px;
  --sb-track: transparent;
  --sb-thumb: #2c3441;
  --sb-thumb-hover: #3d4757;

  /* --- Tipografia --------------------------------------------------------- */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             "Noto Sans", Ubuntu, Cantarell, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 30px;
  --fs-3xl: 52px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.14;
  --lh-normal: 1.5;
  /* Rotulos en versalitas: el espaciado ancho es lo que los hace legibles. */
  --ls-wide: 0.1em;
  /* Titulares grandes: el tracking negativo es lo que los hace verse actuales. */
  --ls-tight: -0.03em;

  /* --- Espaciado ---------------------------------------------------------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;
  --sp-8: 32px;

  /* --- Radios --------------------------------------------------------------
     Precisos, no burbujeantes. Un editor no es una app de movil. */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 12px;
  --r-full: 999px;

  /* --- Sombras -------------------------------------------------------------
     Difusas y de baja opacidad: elevan sin ensuciar. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-3: 0 28px 70px rgba(0, 0, 0, 0.62), 0 4px 14px rgba(0, 0, 0, 0.4);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  /* --- Transiciones --------------------------------------------------------
     Rapidas. Una interfaz de dibujo no debe hacer esperar a nadie. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 110ms var(--ease);
  --t-med: 190ms var(--ease);
  --t-slow: 320ms var(--ease-out);

  /* --- Capas (z-index) ---------------------------------------------------- */
  --z-dock: 10;
  --z-overlay: 200;
  --z-dialog: 400;
  --z-menu: 600;
  --z-toast: 800;
  --z-boot: 900;

  /* --- Tamanos de control ------------------------------------------------- */
  --ctrl-h: 30px;
  --ctrl-h-sm: 23px;
  --ctrl-h-lg: 38px;
  --ctrl-h-touch: 44px;
  --touch-min: 44px;
  --ctrl-h-cur: var(--ctrl-h);
  --ctrl-h-sm-cur: var(--ctrl-h-sm);
  --ctrl-px: 11px;
  --focus-w: 2px;

  /* Token de INSTANCIA de `.swatch` (main.css): ui/colorPanel.js lo fija por
     elemento con `el.style.setProperty('--swatch-color', hex)`. Aqui solo se
     declara el valor por defecto, para que una muestra todavia sin pintar se
     vea como un control vacio en lugar de desaparecer. */
  --swatch-color: var(--s-3);

  /* --- Metricas de layout del editor (consumidas por editor.css) ---------- */
  --menubar-h: 34px;
  --topbar-h: 40px;
  --toolbar-w: 46px;
  --dock-w: 280px;
  --dock-w-min: 220px;
  --dock-w-max: 460px;
  --timeline-h: 216px;
  --timeline-h-min: 120px;
  --statusbar-h: 24px;
  --mobile-bar-h: 58px;
  --ruler-size: 18px;
  --tl-gutter: 148px;
  --tl-cell-w: 22px;
  --tl-row-h: 28px;

  /* --- Opacidades --------------------------------------------------------- */
  --op-disabled: 0.38;
  --op-muted: 0.66;

  /* Escala de interfaz: `settings.uiScale` reescribe esta variable en <html>. */
  --ui-scale: 1;

  /* Densidad: `settings.density` la reescribe. 1 = normal, <1 compacta. Las
     metricas que deben encoger la multiplican. */
  --density: 1;
}

/* ============================================================================
   TEMA CLARO
   `[data-theme="light"]` explicito y `[data-theme="auto"]` cuando el sistema
   pide claro. Se mantiene la semantica de superficies: --s-0 es el fondo mas
   alejado del usuario y --s-3/--s-4 son los rellenos interactivos (que en
   claro son mas OSCUROS que el panel, para que un boton siga pareciendo boton).

   El acento se oscurece (--accent-l mas bajo) porque el mismo violeta que
   brilla sobre negro no tiene contraste suficiente sobre blanco.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --accent-l: 52%;

  --s-0: #eef1f6;
  --s-1: #f8fafc;
  --s-2: #ffffff;
  --s-3: #eceff5;
  --s-4: #dde3ec;
  --s-hi: #c5cdda;

  --bd-soft: #eef1f6;
  --bd: #dde2ea;
  --bd-strong: #b6c0ce;

  --fg: #101521;
  --fg-dim: #475364;
  /* Mismo criterio que en oscuro: comprobado por encima de 4.5:1 sobre --s-0,
     --s-1, --s-2 y --s-3. Sobre --s-4 (relleno de hover) no se pinta mute. */
  --fg-mute: #586271;
  --fg-inv: #ffffff;

  --ok: #12855a;
  --ok-soft: rgba(18, 133, 90, 0.13);
  --warn: #a8710a;
  --warn-soft: rgba(168, 113, 10, 0.13);
  --err: #d0353a;
  --err-soft: rgba(208, 53, 58, 0.12);

  --canvas-bg: #aeb7c6;
  --canvas-shadow: 0 18px 44px rgba(16, 24, 40, 0.2), 0 2px 8px rgba(16, 24, 40, 0.12);
  --checker-a: #ffffff;
  --checker-b: #e4e7ec;

  --sb-thumb: #c3ccd9;
  --sb-thumb-hover: #a3aebd;

  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.08);
  --sh-2: 0 8px 24px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-3: 0 28px 70px rgba(16, 24, 40, 0.16), 0 4px 14px rgba(16, 24, 40, 0.08);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --accent-glow: 0 0 0 1px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.5),
                 0 0 14px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;

    --accent-l: 52%;

    --s-0: #eef1f6;
    --s-1: #f8fafc;
    --s-2: #ffffff;
    --s-3: #eceff5;
    --s-4: #dde3ec;
    --s-hi: #c5cdda;

    --bd-soft: #eef1f6;
    --bd: #dde2ea;
    --bd-strong: #b6c0ce;

    --fg: #101521;
    --fg-dim: #475364;
    --fg-mute: #586271;
    --fg-inv: #ffffff;

    --ok: #12855a;
    --ok-soft: rgba(18, 133, 90, 0.13);
    --warn: #a8710a;
    --warn-soft: rgba(168, 113, 10, 0.13);
    --err: #d0353a;
    --err-soft: rgba(208, 53, 58, 0.12);

    --canvas-bg: #aeb7c6;
    --canvas-shadow: 0 18px 44px rgba(16, 24, 40, 0.2), 0 2px 8px rgba(16, 24, 40, 0.12);
    --checker-a: #ffffff;
    --checker-b: #e4e7ec;

    --sb-thumb: #c3ccd9;
    --sb-thumb-hover: #a3aebd;

    --sh-1: 0 1px 2px rgba(16, 24, 40, 0.08);
    --sh-2: 0 8px 24px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    --sh-3: 0 28px 70px rgba(16, 24, 40, 0.16), 0 4px 14px rgba(16, 24, 40, 0.08);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --accent-glow: 0 0 0 1px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.5),
                   0 0 14px hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
  }
}

/* ============================================================================
   TEMA DE ALTO CONTRASTE
   `settings.theme = 'contrast'` pone data-theme="contrast" en <html>.

   No es "el tema oscuro con mas brillo": es un tema pensado para quien necesita
   separaciones inequivocas. Negro puro de fondo, texto blanco puro, bordes
   VISIBLES (aqui si, es la excepcion a la regla de jerarquia por superficie) y
   un acento muy luminoso. Todas las combinaciones de texto sobre fondo superan
   holgadamente el 7:1 que pide el nivel AAA.
   ========================================================================== */
:root[data-theme="contrast"] {
  color-scheme: dark;

  --accent-h: 210;
  --accent-s: 100%;
  --accent-l: 72%;

  --s-0: #000000;
  --s-1: #0a0a0a;
  --s-2: #141414;
  --s-3: #1f1f1f;
  --s-4: #333333;
  --s-hi: #4d4d4d;

  /* En alto contraste los bordes SI se ven: son la separacion principal. */
  --bd-soft: #3a3a3a;
  --bd: #5a5a5a;
  --bd-strong: #8a8a8a;

  --fg: #ffffff;
  --fg-dim: #e0e0e0;
  --fg-mute: #bdbdbd;
  --fg-inv: #000000;

  --ok: #4ae08a;
  --ok-soft: rgba(74, 224, 138, 0.22);
  --warn: #ffd23f;
  --warn-soft: rgba(255, 210, 63, 0.22);
  --err: #ff7b7b;
  --err-soft: rgba(255, 123, 123, 0.22);

  --canvas-bg: #000000;
  --canvas-shadow: 0 0 0 1px #8a8a8a;
  --checker-a: #3a3a3a;
  --checker-b: #1f1f1f;

  --sb-thumb: #5a5a5a;
  --sb-thumb-hover: #8a8a8a;

  /* Sombras casi inutiles sobre negro puro: la elevacion la marca el borde. */
  --sh-1: 0 0 0 1px #5a5a5a;
  --sh-2: 0 0 0 1px #8a8a8a;
  --sh-3: 0 0 0 2px #8a8a8a;
  --sh-inset: none;

  --focus-w: 3px;
  --op-disabled: 0.5;
}

/* ============================================================================
   DENSIDAD COMPACTA
   `settings.density = 'compact'` pone data-density="compact" en <html>.
   Solo toca metricas, nunca color ni tipografia: la interfaz se aprieta sin
   cambiar de aspecto.
   ========================================================================== */
:root[data-density="compact"] {
  --ctrl-h: 26px;
  --ctrl-h-sm: 20px;
  --ctrl-px: 8px;
  --menubar-h: 30px;
  --topbar-h: 34px;
  --toolbar-w: 40px;
  --statusbar-h: 22px;
  --tl-row-h: 24px;
  --sp-5: 10px;
  --sp-6: 13px;
  --sp-7: 18px;
}

:root[data-density="comfortable"] {
  --ctrl-h: 34px;
  --ctrl-h-sm: 27px;
  --ctrl-px: 13px;
  --menubar-h: 38px;
  --topbar-h: 46px;
  --toolbar-w: 52px;
  --tl-row-h: 32px;
  --sp-5: 14px;
  --sp-6: 19px;
  --sp-7: 28px;
}

/* ============================================================================
   PUNTERO GRUESO (tactil)
   Regla global del sistema: con (pointer: coarse) todos los controles crecen
   hasta la altura minima accesible de 44px.
   ========================================================================== */
@media (pointer: coarse) {
  :root {
    --ctrl-h-cur: var(--ctrl-h-touch);
    --ctrl-h-sm-cur: 36px;
    --ctrl-px: 12px;
    --fs-md: 13.5px;
    --menubar-h: 40px;
    --topbar-h: 48px;
    --toolbar-w: 56px;
  }
}

/* ============================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms linear;
    --t-med: 0ms linear;
    --t-slow: 0ms linear;
  }
}