/* ============================================================
   Tarot Kaizen · Tokens de diseño (paleta + escalas)
   ------------------------------------------------------------
   Paleta "Kaizen" (washi / sumi / ai / shu) inspirada en la
   estética japonesa. Todo el color de la app sale de aquí.
   Para cambiar la paleta, edita SOLO las variables de :root
   (modo claro) y de [data-theme="dark"] (modo oscuro).
   ============================================================ */

:root {
  /* --- Paleta Kaizen · MODO CLARO (washi / papel) --- */
  --k-bg:          #F3EEE4; /* washi - fondo papel */
  --k-surface:     #FBF8F2; /* superficie carta/panel */
  --k-surface-2:   #ECE4D5; /* superficie secundaria */
  --k-ink:         #26231E; /* sumi - texto principal */
  --k-ink-soft:    #5C5447; /* texto secundario */
  --k-line:        #E0D6C4; /* bordes / separadores */

  --k-primary:     #30566E; /* ai - índigo (acción) */
  --k-primary-ink: #FBF8F2; /* texto sobre primary */
  --k-accent:      #D1603D; /* shu - bermellón (acento) */
  --k-gold:        #B8893B; /* kin - oro (místico) */
  --k-success:     #4F7A4E;
  --k-danger:      #B0463A;

  /* --- Tipografía --- */
  --font-ui:    "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;

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

  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 22px;

  --shadow-1: 0 1px 2px rgba(38,35,30,.08), 0 2px 8px rgba(38,35,30,.06);
  --shadow-2: 0 6px 24px rgba(38,35,30,.14);

  --card-ratio: 300 / 500; /* proporción real de las imágenes */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Paleta Kaizen · MODO OSCURO (sumi / noche) --- */
[data-theme="dark"] {
  --k-bg:          #1A1815;
  --k-surface:     #232019;
  --k-surface-2:   #2C281F;
  --k-ink:         #EDE6D7;
  --k-ink-soft:    #B2A890;
  --k-line:        #3A342A;

  --k-primary:     #79A8B6; /* índigo claro */
  --k-primary-ink: #171511;
  --k-accent:      #E8795A;
  --k-gold:        #D4B45E;
  --k-success:     #7FAE7C;
  --k-danger:      #D96B5C;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.5);
}

/* Respeta la preferencia del sistema si el usuario no eligió tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --k-bg:#1A1815; --k-surface:#232019; --k-surface-2:#2C281F;
    --k-ink:#EDE6D7; --k-ink-soft:#B2A890; --k-line:#3A342A;
    --k-primary:#79A8B6; --k-primary-ink:#171511; --k-accent:#E8795A;
    --k-gold:#D4B45E; --k-success:#7FAE7C; --k-danger:#D96B5C;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.35);
    --shadow-2:0 8px 28px rgba(0,0,0,.5);
  }
}