/*
 * Tokens de diseño de QuietMood — copia sincronizada a mano desde el monorepo
 * del producto:
 *   /home/julio/quietmood/packages/design/dist/tokens.css  (modo claro, fuente única: tokens.json)
 *   /home/julio/quietmood/apps/desktop/src/App.css          (overrides de modo oscuro, bloque
 *                                                             `:root[data-theme="dark"]`)
 *
 * Por qué una copia y no un symlink/paquete: este repo es HTML+CSS puro sin
 * build de JS, y el monorepo NO debe modificarse desde aquí. Si cambian los
 * tokens de marca en el monorepo, hay que volver a copiar el bloque `:root`
 * correspondiente a mano. No se han renombrado variables para que un diff
 * futuro sea directo.
 *
 * Solo se listan aquí los tokens que la landing usa. El set completo del
 * producto tiene además tokens de estado (error/warning/info) y de layout de
 * la app de escritorio que no aplican a una página de marketing.
 *
 * Tipografía (añadido en el rediseño, no viene del monorepo): tres pilas de
 * fuentes del sistema, cero webfonts, pairing deliberado —
 *   --qm-font-display : serif editorial para h1/h2 (la apuesta de la marca)
 *   --qm-font-body     : sans-serif del sistema para UI y cuerpo (ya se
 *                         usaba; ahora tiene nombre de token)
 *   --qm-font-mono      : monoespaciada del sistema para cifras y datos
 *                         (0.67, 83%, precios) — el mismo espíritu que separa
 *                         "dato" de "prosa" en el resto del producto.
 */

:root {
  color-scheme: light dark;

  /* — Color (modo claro, valores del producto) — */
  --qm-color-brand-primary: #1a1a2e;
  --qm-color-background: #f5f6f8;
  --qm-color-surface: #ffffff;
  --qm-color-text-primary: #1a1a2e;
  --qm-color-text-muted: #6b7280;
  --qm-color-text-subtle: #667085;
  --qm-color-positive: #16a34a;
  --qm-color-negative: #dc2626;
  --qm-color-accent: #1a1a2e;
  --qm-color-on-accent: #ffffff;
  --qm-color-border: #e2e4e9;
  --qm-color-divider: #e9eaee;

  /* — Espaciado — */
  --qm-dimension-spacing-xs: 4px;
  --qm-dimension-spacing-sm: 8px;
  --qm-dimension-spacing-md: 12px;
  --qm-dimension-spacing-lg: 16px;
  --qm-dimension-spacing-xl: 20px;
  --qm-dimension-spacing-2xl: 32px;

  /* — Radios — */
  --qm-dimension-radius-sm: 4px;
  --qm-dimension-radius-card: 16px;
  --qm-dimension-radius-control: 10px;

  /* — Escala tipográfica — */
  --qm-dimension-font-size-micro: 11px;
  --qm-dimension-font-size-small: 12px;
  --qm-dimension-font-size-caption: 13px;
  --qm-dimension-font-size-body-sm: 14px;
  --qm-dimension-font-size-subtitle: 15px;
  --qm-dimension-font-size-body: 16px;
  --qm-dimension-font-size-heading-sm: 19px;
  --qm-dimension-font-size-heading: 22px;
  --qm-dimension-font-size-title: 32px;
  --qm-dimension-font-size-display: 40px;

  /* — Familias tipográficas (system stacks, cero webfonts) — */
  --qm-font-display: "Iowan Old Style", Charter, "Georgia Pro", Georgia, "Times New Roman", serif;
  --qm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --qm-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --qm-shadow-card: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);

  --qm-font-weight-regular: 400;
  --qm-font-weight-semibold: 600;
  --qm-font-weight-bold: 700;
}

/* Modo oscuro: sigue al SO (misma señal que usa la app de escritorio) y se
   puede forzar con data-theme si algún día la landing gana un selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --qm-color-brand-primary: #ececf1;
    --qm-color-background: #16161f;
    --qm-color-surface: #1e1e2a;
    --qm-color-text-primary: #ececf1;
    --qm-color-text-muted: #9a9aad;
    --qm-color-text-subtle: #8a8aa2;
    --qm-color-positive: #16a34a;
    --qm-color-negative: #f87171;
    --qm-color-accent: #818cf8;
    --qm-color-on-accent: #16161f;
    --qm-color-border: #313142;
    --qm-color-divider: #2a2a38;
    --qm-shadow-card: 0px 2px 8px 0px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --qm-color-brand-primary: #ececf1;
  --qm-color-background: #16161f;
  --qm-color-surface: #1e1e2a;
  --qm-color-text-primary: #ececf1;
  --qm-color-text-muted: #9a9aad;
  --qm-color-text-subtle: #8a8aa2;
  --qm-color-positive: #16a34a;
  --qm-color-negative: #f87171;
  --qm-color-accent: #818cf8;
  --qm-color-on-accent: #16161f;
  --qm-color-border: #313142;
  --qm-color-divider: #2a2a38;
  --qm-shadow-card: 0px 2px 8px 0px rgba(0, 0, 0, 0.4);
}