/* Fuente única de tokens: sincronizá tokens.json al editar. Tema oscuro por defecto. */
:root {
  --cq-bg: #0F0E0C;
  --cq-surface: #171512;
  --cq-surface-2: #201D19;
  --cq-ink: #F3EFE8;
  --cq-ink-2: #A89F93;
  --cq-line: #2A2622;
  --cq-accent: #F2A93B;
  --cq-accent-ink: #1A1206;
  --cq-ai: #8FB3FF;
  --cq-ok: #7FC48A;
  --cq-warn: #E8B04A;
  --cq-bad: #E36B6B;
  --cq-paper: #FBF8F1;

  /* Tintes al 12 % para fondos de chips, estados y hover; velo para superposiciones. */
  --cq-ai-tint: #8FB3FF1F;
  --cq-accent-tint: #F2A93B1F;
  --cq-ok-tint: #7FC48A1F;
  --cq-warn-tint: #E8B04A1F;
  --cq-bad-tint: #E36B6B1F;
  --cq-scrim: #0F0E0CB3;

  /* Familias y escala tipográfica; la app sirve las fuentes desde /fuentes y estos fallbacks cubren el resto. */
  --cq-font-ui: Inter, Geist, system-ui, sans-serif;
  --cq-font-script: "Courier Prime", "Courier New", monospace;
  --cq-font-display: "Instrument Serif", serif;
  --cq-text-12: 12px;
  --cq-text-14: 14px;
  --cq-text-16: 16px;
  --cq-text-20: 20px;
  --cq-text-24: 24px;
  --cq-text-28: 28px;
  --cq-text-40: 40px;

  /* Roles M3: alias de la escala existente, sin tamaños nuevos. */
  --cq-type-display: var(--cq-text-40);
  --cq-type-headline: var(--cq-text-28);
  --cq-type-title: var(--cq-text-20);
  --cq-type-body: var(--cq-text-16);
  --cq-type-label: var(--cq-text-12);

  /* Grilla de 4 px y radios compartidos. */
  --cq-space-1: 4px;
  --cq-space-2: 8px;
  --cq-space-3: 12px;
  --cq-space-4: 16px;
  --cq-space-5: 24px;
  --cq-space-6: 32px;
  --cq-space-7: 48px;
  --cq-radius-control: 6px;
  --cq-radius-card: 10px;
  --cq-radius-sheet: 16px;
  --cq-radius-pill: 999px;

  /* En oscuro no hay sombras: se separa por superficie y línea. */
  --cq-shadow-sm: none;
  --cq-shadow-lg: none;

  /* Aplicá ease-out a las transiciones; nunca animaciones en loop. */
  --cq-motion-fast: 150ms;
  --cq-motion-base: 220ms;

  /* Layout, foco y medida. */
  --cq-ease: ease-out;
  --cq-focus-ring: 0 0 0 2px var(--cq-accent);
  --cq-touch: 44px;
  --cq-rail-width: 64px;
  --cq-rail-med: 72px;
  --cq-sidebar-width: 240px;
  --cq-cab-height: 52px;
  --cq-cab-ancha: 60px;
  --cq-zona-height: 60px;
  --cq-hoja-media: 392px;
  --cq-inspector-width: 360px; /* Compatibilidad: no define el ancho efectivo del panel. */
  --cq-inspector-min: 200px;
  --cq-inspector-max: 400px;
  --cq-inspector-ideal: 300px;
  --cq-bottombar-height: 56px;
  --cq-text-body-lg: 15px; /* Cuerpo en escritorio. */
  --cq-script-size: 12pt;
  --cq-script-leading: 1;
  --cq-measure: 68ch;

  /* Alias semánticos: resuelven los colores del tema activo. */
  --cq-text-body: var(--cq-ink);
  --cq-text-muted: var(--cq-ink-2);
  --cq-surface-card: var(--cq-surface);
  --cq-surface-raised: var(--cq-surface-2);
  --cq-border: var(--cq-line);
}

[data-theme="light"] {
  --cq-bg: #FAF8F4;
  --cq-surface: #FFFFFF;
  --cq-surface-2: #F2EEE7;
  --cq-ink: #1A1814;
  --cq-ink-2: #6B6358;
  --cq-line: #E4DED4;
  --cq-accent: #C97E12;
  --cq-accent-ink: #1A1814;
  --cq-ai: #3D6FD6;
  --cq-ok: #2F8F4E;
  --cq-warn: #B07A12;
  --cq-bad: #C43C3C;
  --cq-paper: #FFFFFF;

  /* Tintes al 10 %: el azul no ensucia el blanco. */
  --cq-ai-tint: #3D6FD61A;
  --cq-accent-tint: #C97E121A;
  --cq-ok-tint: #2F8F4E1A;
  --cq-warn-tint: #B07A121A;
  --cq-bad-tint: #C43C3C1A;
  --cq-scrim: #1A181480;

  /* Sombras suaves para superficies del tema claro. */
  --cq-shadow-sm: 0 1px 2px #1A181414;
  --cq-shadow-lg: 0 8px 24px #1A18141F;
}

/* El papel hereda los tokens claros dentro de la sala oscura, pero conserva su tono cálido. */
:root:not([data-theme="light"]) [data-theme="light"] {
  --cq-paper: #FBF8F1;
}

/* Cuerpo de 16 px hasta 839 y de 15 px desde 840. */
@media (width >= 52.5em) {
  :root { --cq-type-body: var(--cq-text-body-lg); }
}

/* Respetá la preferencia de movimiento en ambos temas. */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="light"] {
    --cq-motion-fast: 0ms;
    --cq-motion-base: 0ms;
  }
}