/* ============================================================
   REPLIKA — Design Tokens (canónicos)
   Dark-first · Light secundario · v1.0
   Fuente única de verdad — sincronizado con _documents/01_DOCS/tokens.css
   ============================================================ */

:root {
  /* ---- Neutral ramp (cool-neutral) ---- */
  --ink-950: #08080A;
  --ink-900: #0E0E11;
  --ink-850: #141417;
  --ink-800: #1A1A1E;
  --ink-700: #232328;
  --ink-600: #2E2E35;
  --ink-500: #3A3A42;
  --ink-400: #6B6B76;
  --ink-300: #9A9AA5;
  --ink-200: #C4C4CC;
  --ink-100: #EDEDF0;
  --ink-000: #FFFFFF;

  /* ---- Paper (light mode) ---- */
  --paper-000: #F7F7F5;
  --paper-100: #FFFFFF;
  --paper-text: #0A0A0B;
  --paper-muted: #5A5A63;
  --paper-border: #E3E3DF;

  /* ---- Semantic (functional only) ---- */
  --success: #4FAE83;
  --error:   #D26464;
  --warning: #C9A24B;
  /* Menciones (@) en el prompt de vídeo. Es el único azul de la paleta: marca
     "esto apunta a un adjunto", no un estado. */
  --mention: #5B9CE6;

  /* ---- Type ---- */
  --font-sans: "Geist", "Geist Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --fs-h1:      clamp(1.9rem, 3vw, 2.4rem);
  --fs-h2:      clamp(1.35rem, 2vw, 1.6rem);
  --fs-h3:      1.125rem;
  --fs-body:    0.9375rem;
  --fs-body-s:  0.875rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.72rem;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.02em;
  --tracking-wide:  0.14em;

  /* ---- Space scale (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- Motion ---- */
  --ease-out-cine:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cine: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-soft:    cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- App shell ---- */
  --sidebar-w: 264px;
  --sidebar-w-rail: 68px;
  --topbar-h: 60px;

  /* ============================================================
     SEMANTIC ALIASES — DARK FIRST (default)
     ============================================================ */
  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --surface:       var(--ink-850);
  --surface-hover: var(--ink-800);
  --border-subtle: var(--ink-700);
  --border:        var(--ink-600);
  --border-strong: var(--ink-500);

  --text:          var(--ink-100);
  --text-secondary:var(--ink-200);
  --text-muted:    var(--ink-300);
  --text-faint:    var(--ink-400);

  --accent-bg:     var(--ink-000);   /* primary button bg */
  --accent-fg:     var(--ink-950);   /* primary button text */
  --focus-ring:    rgba(255,255,255,0.40);

  --logo-filter:   invert(1);
  --shadow-elev:   none;             /* dark uses surface + border, not shadow */
  --shadow-pop:    0 24px 50px -24px rgba(0,0,0,.8);
  --scrim:         rgba(8,8,10,.62);

  /* Declara el esquema al navegador: evita que el "modo oscuro automático"
     de Chrome/Edge re-invierta la app (logos/íconos blancos se veían negros
     en equipos con esa opción activada). */
  color-scheme: dark;
}

/* ============================================================
   LIGHT MODE (secondary) — opt-in via [data-theme="light"]
   ============================================================ */
[data-theme="light"] {
  --bg:            var(--paper-000);
  --bg-subtle:     #EFEFEC;
  --surface:       var(--paper-100);
  --surface-hover: #F1F1EE;
  --border-subtle: var(--paper-border);
  --border:        #D7D7D2;
  --border-strong: #BFBFB9;

  --text:          var(--paper-text);
  --text-secondary:#2A2A2E;
  --text-muted:    var(--paper-muted);
  /* #8A8A90 daba 2.98:1 sobre --bg-subtle: no llegaba al mínimo legible en
     ninguno de los tres fondos claros. Este cubre 4.5:1 en todos. */
  --text-faint:    #6B6B76;

  /* Los semánticos están calibrados para fondo oscuro; sobre papel se quedaban
     entre 2.4:1 y 3.6:1. Estas versiones mantienen el tono y pasan de 4.5:1. */
  --success: #1F7A55;
  --error:   #B3312F;
  --warning: #7A5E12;
  --mention: #1F5FA8;   /* el de oscuro se queda en 2.6:1 sobre papel */

  --accent-bg:     var(--ink-950);   /* inversion flips */
  --accent-fg:     var(--ink-000);
  --focus-ring:    rgba(10,10,11,0.40);

  --logo-filter:   none;
  --shadow-elev: 0 1px 2px rgba(10,10,11,.06), 0 8px 24px rgba(10,10,11,.08);
  --shadow-pop:  0 24px 50px -24px rgba(10,10,11,.35);
  --scrim:       rgba(10,10,11,.4);
  color-scheme: light;
}

/* ============================================================
   MODO LIGERO (perf-lite) — equipos con pocos recursos.
   Lo activa theme-init.js (heurística) o el usuario en Ajustes.
   Quita los efectos más caros para el GPU manteniendo la estética:
   · backdrop-filter (blur de cristal) → queda el fondo translúcido
   · animaciones decorativas en bucle → se congelan (mismo criterio
     que prefers-reduced-motion, ya aceptado abajo)
   Los videos de fondo y el cursor custom los gestiona JS.
   ============================================================ */
html.perf-lite * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Contenido protegido: ni arrastrar imágenes/vídeos al escritorio ni el menú
   largo de iOS al mantener pulsado. La selección de texto ya está limitada a
   los prompts (body{user-select:none} en app.css y login.css). */
img, video, canvas {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Nada de controles nativos flotantes (PiP, botón de play, descarga) en los
   videos de fondo/preview. Solo afecta a los que NO piden controls, así que el
   reproductor de detalle (con su barra) queda intacto.
   `pointer-events:none` impide que el hover dispare la píldora de
   Picture-in-Picture de Chrome — funciona desde el parseo, sin depender de JS. */
video:not([controls]) { pointer-events: none; }
video:not([controls])::-webkit-media-controls,
video:not([controls])::-webkit-media-controls-enclosure,
video:not([controls])::-webkit-media-controls-panel,
video:not([controls])::-webkit-media-controls-overlay-enclosure,
video:not([controls])::-webkit-media-controls-overlay-play-button,
video:not([controls])::-webkit-media-controls-start-playback-button,
/* Los flotantes que Chrome pinta arriba al centro sobre videos grandes:
   la pastilla de Picture-in-Picture y la de enviar a un dispositivo. */
video:not([controls])::-webkit-media-controls-overlay-cast-button,
video:not([controls])::-webkit-media-controls-picture-in-picture-button,
video:not([controls])::-webkit-media-controls-fullscreen-button,
video:not([controls])::-webkit-media-controls-download-button,
video:not([controls])::-webkit-media-controls-play-button,
video:not([controls])::-webkit-media-controls-timeline {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}