/* Vive UI 2.6.0 — puente de tokens de Gastos (family-budget).
   Cargar DESPUÉS de styles.css y del resto del CSS propio: re-declara los tokens heredados del
   proyecto como alias de los tokens canónicos de Vive UI (vive/tokens.css), para que el código
   existente siga funcionando sin tocarlo — ver vive-ui/project/guidelines/60-adoption.md §Gastos.

   Migración completa (2026-09-21, decisions.md «todo desde vive-ui»): styles.css ya NO declara
   ningún token propio (ratchet del gate, scripts/vive-gate.sh regla b) — todo custom property de
   Gastos vive aquí. Donde hay equivalente semántico en Vive, alias directo (var(--vive-token)).
   Donde no lo hay (paleta de categorías, escala tipográfica compuesta, motion, medidas de layout
   propias), valor literal igual al que tenía styles.css antes de moverlo — deuda a encoger,
   candidata a `vive-ui/reports/requests.md` cuando haya evidencia de un segundo proyecto.

   Baseline del ratchet (scripts/vive-legacy-baseline, sin comentarios propios — se anota aquí):
   fijado en 120/max=120 al aterrizar esta migración (2026-09-21, tribunal #298 P2) — 120 tokens
   legacy contados por ocurrencia es el punto de partida honesto, 0% de alineación; solo puede
   bajar de ahí (regla c de scripts/vive-gate.sh). */

:root, [data-theme="light"], :root[data-theme="dark"] {
  /* color */
  --color-bg: var(--canvas);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-ink: var(--ink);
  --color-body: var(--ink-muted);
  --color-muted: var(--ink-muted);
  --color-muted-2: var(--ink-muted);
  --color-muted-3: var(--ink-muted);
  --color-line: var(--border);
  --color-line-soft: var(--border-subtle);
  --color-track: var(--surface-3);

  /* marca = primario del sistema */
  --color-brand: var(--primary);
  --color-brand-fg: var(--primary);
  --color-brand-ink: var(--primary);
  --color-on-brand: var(--on-primary);
  --color-brand-soft: var(--primary-hover);
  --color-brand-bg: var(--primary-soft);
  --color-brand-tint: var(--primary-soft);
  --color-brand-line: color-mix(in srgb, var(--primary) 26%, var(--surface));

  /* semánticos */
  --color-ok: var(--success);
  --color-ok-bg: var(--success-soft);
  --color-over: var(--danger);
  --color-danger: var(--danger);
  --color-danger-bg: var(--danger-soft);
  --color-warn: var(--warning);
  --color-warn-bg: var(--warning-soft);

  /* cromo */
  --color-scrim: var(--scrim);
  --color-sheet-handle: var(--border-strong);
  --color-seg-off: var(--ink-muted);
  --color-chevron: var(--ink-muted);
  --color-dropzone-bg: var(--surface-2);
  --color-offline-border: color-mix(in srgb, var(--warning) 40%, var(--surface));
  --color-offline-shadow: color-mix(in srgb, var(--ink) 10%, transparent);

  /* paleta de categorías (8 tonos propios, R1) — sin equivalente en Vive (tokens.css no expone
     una escala categórica); valores idénticos a los que tenía styles.css. Candidato a pedir a
     vive-ui una paleta categórica (vive-ui/project/reports/requests.md) cuando haya evidencia de
     un segundo proyecto con la misma necesidad. */
  --color-cat-1: #2BB5A5;
  --color-cat-2: #F26FA8;
  --color-cat-3: #9B7BF2;
  --color-cat-4: #FF8A4C;
  --color-cat-5: #4F86F0;
  --color-cat-6: #EF5B5B;
  --color-cat-7: #E3A81C;
  --color-cat-8: #4CBF6A;

  /* tipografía — una sola familia, del sistema. --font-display NO se alias aquí: tokens.css ya
     declara el mismo token con el mismo valor (Geist), styles.css simplemente ya no lo redeclara.
     Deuda anotada (tribunal #298): --font-mono (Geist Mono) está vendorizado — @font-face en
     styles.css, fichero en app/public/fonts/, lo prescribe INSTALL.md de vive-ui — pero ningún
     CSS de Gastos usa var(--font-mono); las cifras tabulares van con `font-variant-numeric:
     tabular-nums` sobre Geist normal, no con la fuente mono. No se retira (vive-ui lo carga
     siempre junto a Geist) ni se usa a la fuerza sin un caso real. */
  --font-ui: var(--font-sans);
  --font: var(--font-sans);

  /* escala tipográfica compuesta (peso tamaño/interlineado familia) — sin equivalente en Vive
     (la librería no expone una escala completa como custom properties, solo alturas de fila por
     densidad). Valores idénticos a los que tenía styles.css; variantes de tamaño de texto y
     escritorio ≥1100px más abajo. --fs-ui SÍ tiene equivalente: --text-touch de Vive vale
     15px, el mismo literal que tenía styles.css. --fs-field no se alias (16px es el umbral de
     iOS Safari contra el zoom al enfocar, sin relación con la escala de densidad de Vive). */
  --fs-field: 16px;
  --text-hero: 600 clamp(28px, 8vw, 36px)/1.1 var(--font-display);
  --text-display: 600 clamp(34px, 11vw, 44px)/1.05 var(--font-display);
  --text-title: 600 17px/1.3 var(--font-ui);
  --text-title-sm: 600 16px/1.3 var(--font-ui);
  --text-section: 600 13px/1.3 var(--font-ui);
  --text-num: 600 15px/1.3 var(--font-ui);
  --text-body: 400 15px/1.55 var(--font-ui);
  --text-meta: 400 13px/1.4 var(--font-ui);
  --text-row: 500 15px/1.35 var(--font-ui);
  --text-label: 600 13px/1.3 var(--font-ui);
  --text-caption: 400 13px/1.35 var(--font-ui);

  /* radios, espaciado, sombras y área táctil. --radius-sm NO se alias aquí: tokens.css ya
     declara el mismo nombre (6px); styles.css simplemente ya no lo redeclara. --radius-card y
     --radius-sheet usan la escala real de Vive por USO (tokens.json §radius), no por el pixel
     más parecido: radius-lg (14px) es "cards, popovers and the command palette", radius-xl
     (20px) es "sheets and dialogs" — .card es justo eso, .sheet también (tribunal #298). */
  --radius-card: var(--radius-lg);
  --radius-field: var(--radius-md);
  --radius-chip: var(--radius-full);
  --radius-sheet: var(--radius-xl);

  --space-2xs: var(--space-2);
  --space-xs: var(--space-3);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-xl: var(--space-12);

  /* layout propio de Gastos — sin equivalente en Vive; variante de densidad compacta más abajo. */
  --space-page: clamp(16px, 4.4vw, 24px);
  --rail: 640px;
  --fab-clear: 132px;
  --press-scale: 0.975;

  --tap: var(--row-touch);
  --shadow-fab: var(--shadow-md);
  --shadow-dialog: var(--shadow-lg);

  /* motion — MD3 Expressive. Vive define springs equivalentes (--spring-spatial-*,
     --spring-effects-*, --ease-spring) en components/bundle.css, aún no vendorizado en este
     incremento (paso 1 = solo tokens, ver 60-adoption.md §Gastos); valor literal igual al de
     styles.css hasta que bundle.css entre en la sustitución de primitivas. */
  --ease-salida:   cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-estandar: cubic-bezier(0.2, 0, 0, 1);
  --ease-espacial: cubic-bezier(0.38, 1.21, 0.22, 1);
  --dur-rapida: 150ms;
  --dur-panel:  280ms;
  --dur-vista:  400ms;
}

/* Escala de texto «Grande»/«Muy grande» (Ajustes → Apariencia) — variantes del bloque anterior,
   sin equivalente en Vive. */
:root[data-text="grande"] {
  --text-hero: 700 clamp(32px, 8vw, 40px)/1.1 var(--font-display);
  --text-display: 700 clamp(38px, 11vw, 50px)/1.05 var(--font-display);
  --text-title: 600 19px/1.3 var(--font-ui);
  --text-title-sm: 600 18px/1.3 var(--font-ui);
  --text-section: 600 15px/1.3 var(--font-ui);
  --text-num: 600 17px/1.3 var(--font-ui);
  --text-body: 400 17px/1.55 var(--font-ui);
  --text-meta: 400 15px/1.4 var(--font-ui);
  --text-row: 500 17px/1.35 var(--font-ui);
  --text-label: 600 15px/1.3 var(--font-ui);
  --text-caption: 400 15px/1.35 var(--font-ui);
  --fs-field: 17px;
}
:root[data-text="muy-grande"] {
  --text-hero: 700 clamp(36px, 8vw, 44px)/1.1 var(--font-display);
  --text-display: 700 clamp(42px, 11vw, 56px)/1.05 var(--font-display);
  --text-title: 600 22px/1.3 var(--font-ui);
  --text-title-sm: 600 20px/1.3 var(--font-ui);
  --text-section: 600 16px/1.3 var(--font-ui);
  --text-num: 600 19px/1.3 var(--font-ui);
  --text-body: 400 19px/1.5 var(--font-ui);
  --text-meta: 400 16px/1.4 var(--font-ui);
  --text-row: 500 19px/1.35 var(--font-ui);
  --text-label: 600 16px/1.3 var(--font-ui);
  --text-caption: 400 16px/1.35 var(--font-ui);
  --fs-field: 18px;
}

/* Densidad compacta (Ajustes → Apariencia) — espaciado propio de Gastos. --space-page y
   --space-2xs (6px) siguen sin equivalente en Vive; --space-xs/-sm/-md/-xl SÍ lo tienen — sus
   valores en compacta coinciden exactos con la escala de vive/tokens.css (tribunal #298 P2:
   8/12/16/32px = --space-2/3/4/8), así que se alias en vez de repetir el literal. */
:root[data-legacy-density="compacta"] {
  --space-page: clamp(12px, 3.2vw, 20px);
  --space-2xs: 6px;
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-xl: var(--space-8);
}

/* Escritorio ≥900px: la barra de navegación pasa a arriba. --nav-h SIN equivalente Vive
   (tribunal #298 P2, corrección sobre el alias anterior): --dock-h es el dock flotante MÓVIL
   ("Mobile floating dock height", tokens.json) — otro componente, coincidía en valor por
   casualidad, no por rol; --titlebar-h (40px) tampoco vale, valor distinto. Literal 64px, deuda
   anotada — candidato a `vive-ui/reports/requests.md` si Vive expone algún día una altura de
   barra de navegación de escritorio propia. */
@media (min-width: 900px) {
  :root { --nav-h: 64px; }
}

/* Escritorio ≥1100px: rejilla de 12 columnas con escala tipográfica de página propia — variantes
   por tamaño de texto, sin equivalente Vive. */
@media (min-width: 1100px) {
  :root {
    --text-title: 600 24px/1.25 var(--font-ui);
    --text-section: 600 16px/1.3 var(--font-ui);
    --text-row: 500 15px/1.35 var(--font-ui);
  }
  :root[data-text="grande"] {
    --text-title: 600 27px/1.25 var(--font-ui);
    --text-section: 600 18px/1.3 var(--font-ui);
    --text-row: 500 17px/1.35 var(--font-ui);
  }
  :root[data-text="muy-grande"] {
    --text-title: 600 30px/1.25 var(--font-ui);
    --text-section: 600 20px/1.3 var(--font-ui);
    --text-row: 500 19px/1.35 var(--font-ui);
  }
}

/* El arranque de apariencia resuelve «sistema» con matchMedia en js/appearance.js, compartido
   con Ajustes; el tema siempre está en data-theme antes del primer render y
   Vive UI sirve sus tokens en claro y en oscuro sin bloque adicional aquí — el antiguo bloque de
   preferencia de color del sistema y `:root[data-theme="dark"]` de styles.css se retiraron.
   Corrección (tribunal #298): NO eran ya idénticos a Vive — el oscuro propio de Gastos en `main`
   (antes de esta migración) era `--color-ink #F2F3F5`, `--color-bg #0B0D10`, `--color-surface
   #14171C` (paleta neutra propia). Pasar a la paleta oscura de Vive (`--ink #f8fafc`, `--canvas
   #08090a`, `--surface #121316`) es un cambio visual INTENCIONAL, consecuencia directa de «todo
   desde vive-ui» (decisions.md 2026-09-21) — no una limpieza de código muerto. Queda pendiente la
   sustitución de primitivas por clases vv-* (bundle.css, siguiente incremento de 60-adoption.md
   §Gastos) — ver docs/design/prototipo-od/docs/cobertura.md. */