/*
 * Point Kids design tokens 2.0
 *
 * Componentes leen solo tokens semánticos --pk-*.
 * Un tema (data-theme en <html> o en cualquier contenedor) reescribe
 * superficie, tinta, acento y héroe. Puntos y estados no cambian de tono;
 * solo cambian de juego claro/oscuro según el esquema del tema.
 * Contraste verificado: tinta y texto secundario >= 4.5:1 sobre bg y surface,
 * accent-ink >= 4.5:1 sobre accent.
 *
 * Temas: unicornio, jardin, oceano, galaxia, dulces,
 *        espacio, dinosaurios, futbol, pixel, selva,
 *        minimal-claro (por defecto), minimal-oscuro, arena, marino, grafito.
 */

:root {
  /* Tipografía */
  --pk-font-display: Nunito, system-ui, sans-serif;
  --pk-font-body: "Nunito Sans", Nunito, system-ui, sans-serif;
  --pk-text-score-xl: 6rem;
  --pk-text-score-l: 3.5rem;
  --pk-text-display: 2.5rem;
  --pk-text-h1: 1.75rem;
  --pk-text-h2: 1.375rem;
  --pk-text-h3: 1.125rem;
  --pk-text-body: 1rem;
  --pk-text-label: 0.875rem;
  --pk-text-caption: 0.875rem;
  --pk-text-nav: 0.8125rem;

  /* Espaciado, base 4 */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 24px;
  --pk-space-6: 32px;
  --pk-space-7: 48px;
  --pk-space-8: 64px;

  /* Forma */
  --pk-radius-sm: 8px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 16px;
  --pk-radius-xl: 24px;
  --pk-radius-pill: 999px;
  --pk-tap-min: 44px;
  --pk-tap-lg: 56px;
  --pk-shadow-1: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 16px rgb(16 24 40 / 6%);
  --pk-shadow-2: 0 2px 4px rgb(16 24 40 / 8%), 0 12px 32px rgb(16 24 40 / 12%);

  /* Movimiento */
  --pk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pk-dur-tap: 120ms;
  --pk-dur-state: 240ms;
  --pk-dur-meter: 600ms;
  --pk-dur-celebrate: 1200ms;

  /* Puntos: iguales en todos los temas */
  --pk-points: #ffc93c;
  --pk-on-points: #171a2b;
  --pk-pending-solid: #e8a317;
  --pk-on-pending-solid: #171a2b;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pk-dur-tap: 0ms;
    --pk-dur-state: 120ms;
    --pk-dur-meter: 120ms;
    --pk-dur-celebrate: 120ms;
  }
}

/* Estados, juego claro */
:root,
[data-theme] {
  color-scheme: light;
  --pk-done: #157a3b;
  --pk-done-soft: #ddf6e5;
  --pk-missed: #b42318;
  --pk-missed-soft: #fde4e1;
  --pk-pending: #8a4b00;
  --pk-pending-soft: #fff0cc;
  --pk-excluded: #5f6474;
  --pk-excluded-soft: #eef0f4;
  --pk-on-status: #ffffff;
}

/* Estados, juego oscuro */
[data-theme="minimal-oscuro"],
[data-theme="galaxia"],
[data-theme="espacio"],
[data-theme="pixel"],
[data-theme="grafito"] {
  color-scheme: dark;
  --pk-done: #5bd98a;
  --pk-done-soft: #12351f;
  --pk-missed: #ff8a7a;
  --pk-missed-soft: #3d1814;
  --pk-pending: #ffc857;
  --pk-pending-soft: #3a2a08;
  --pk-excluded: #a3a8c0;
  --pk-excluded-soft: #232738;
  --pk-on-status: #10121c;
}

/* ---------- Adulto ---------- */

:root,
[data-theme="minimal-claro"] {
  --pk-bg: #f4f5fa;
  --pk-surface: #ffffff;
  --pk-line: #e2e4ee;
  --pk-ink: #171a2b;
  --pk-ink-muted: #5d6178;
  --pk-accent: #2e4fd8;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #171a2b;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #a3a8c0;
}

[data-theme="minimal-oscuro"] {
  --pk-bg: #10121c;
  --pk-surface: #1a1d2b;
  --pk-line: #2e3247;
  --pk-ink: #eef0f8;
  --pk-ink-muted: #a3a8c0;
  --pk-accent: #8ea2ff;
  --pk-accent-ink: #10121c;
  --pk-surface-strong: #232738;
  --pk-on-strong: #eef0f8;
  --pk-on-strong-muted: #a3a8c0;
}

/* Sin tema elegido: sigue al sistema (Minimal claro / Minimal oscuro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --pk-bg: #10121c;
    --pk-surface: #1a1d2b;
    --pk-line: #2e3247;
    --pk-ink: #eef0f8;
    --pk-ink-muted: #a3a8c0;
    --pk-accent: #8ea2ff;
    --pk-accent-ink: #10121c;
    --pk-surface-strong: #232738;
    --pk-on-strong: #eef0f8;
    --pk-on-strong-muted: #a3a8c0;
    --pk-done: #5bd98a;
    --pk-done-soft: #12351f;
    --pk-missed: #ff8a7a;
    --pk-missed-soft: #3d1814;
    --pk-pending: #ffc857;
    --pk-pending-soft: #3a2a08;
    --pk-excluded: #a3a8c0;
    --pk-excluded-soft: #232738;
    --pk-on-status: #10121c;
  }
}

[data-theme="arena"] {
  --pk-bg: #f3eee3;
  --pk-surface: #fffdf8;
  --pk-line: #e4dccb;
  --pk-ink: #2a2a1e;
  --pk-ink-muted: #6a695f;
  --pk-accent: #5e6b2e;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #2a2a1e;
  --pk-on-strong: #fffdf8;
  --pk-on-strong-muted: #95948b;
}

[data-theme="marino"] {
  --pk-bg: #eef2f8;
  --pk-surface: #ffffff;
  --pk-line: #dce3ef;
  --pk-ink: #0f1e3a;
  --pk-ink-muted: #616a7d;
  --pk-accent: #1d3a6e;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #0f1e3a;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #828a99;
}

[data-theme="grafito"] {
  --pk-bg: #1c1d21;
  --pk-surface: #27292f;
  --pk-line: #3a3c44;
  --pk-ink: #f2f2f4;
  --pk-ink-muted: #959699;
  --pk-accent: #ff7a66;
  --pk-accent-ink: #1c1d21;
  --pk-surface-strong: #4a3638;
  --pk-on-strong: #f2f2f4;
  --pk-on-strong-muted: #afa7a9;
}

/* ---------- Niña ---------- */

[data-theme="unicornio"] {
  --pk-bg: #fbf3ff;
  --pk-surface: #ffffff;
  --pk-line: #eeddf7;
  --pk-ink: #2b1b3d;
  --pk-ink-muted: #73697f;
  --pk-accent: #9b3fd1;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #2b1b3d;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #958d9e;
}

[data-theme="jardin"] {
  --pk-bg: #f4f8ee;
  --pk-surface: #ffffff;
  --pk-line: #e1ebd6;
  --pk-ink: #1e2b1a;
  --pk-ink-muted: #666f63;
  --pk-accent: #c2366b;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #1e2b1a;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #8f958d;
}

[data-theme="oceano"] {
  --pk-bg: #eaf6f8;
  --pk-surface: #ffffff;
  --pk-line: #d3e9ee;
  --pk-ink: #0f2a33;
  --pk-ink-muted: #5c6e74;
  --pk-accent: #0b7285;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #0f2a33;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #879599;
}

[data-theme="galaxia"] {
  --pk-bg: #171230;
  --pk-surface: #221b42;
  --pk-line: #352c5e;
  --pk-ink: #f1ecff;
  --pk-ink-muted: #8e88a4;
  --pk-accent: #c4a6ff;
  --pk-accent-ink: #171230;
  --pk-surface-strong: #3c3160;
  --pk-on-strong: #f1ecff;
  --pk-on-strong-muted: #a9a1bf;
}

[data-theme="dulces"] {
  --pk-bg: #fff4ee;
  --pk-surface: #ffffff;
  --pk-line: #f6e1d8;
  --pk-ink: #3a1e1a;
  --pk-ink-muted: #796663;
  --pk-accent: #b8325a;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #3a1e1a;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #9d8f8d;
}

/* ---------- Niño ---------- */

[data-theme="espacio"] {
  --pk-bg: #0e1530;
  --pk-surface: #18214a;
  --pk-line: #2a3566;
  --pk-ink: #eaf0ff;
  --pk-ink-muted: #858da8;
  --pk-accent: #ff8a3d;
  --pk-accent-ink: #0e1530;
  --pk-surface-strong: #3d3248;
  --pk-on-strong: #eaf0ff;
  --pk-on-strong-muted: #a5a4b6;
}

[data-theme="dinosaurios"] {
  --pk-bg: #f1f4e6;
  --pk-surface: #ffffff;
  --pk-line: #e0e6cc;
  --pk-ink: #1f2a12;
  --pk-ink-muted: #676e5e;
  --pk-accent: #3f7a1e;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #1f2a12;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #8f9589;
}

[data-theme="futbol"] {
  --pk-bg: #eef6ef;
  --pk-surface: #ffffff;
  --pk-line: #d6e8d9;
  --pk-ink: #0e2414;
  --pk-ink-muted: #606e64;
  --pk-accent: #157a3b;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #0e2414;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #828d85;
}

[data-theme="pixel"] {
  --pk-bg: #0b0b14;
  --pk-surface: #171726;
  --pk-line: #2a2a40;
  --pk-ink: #e9f7ff;
  --pk-ink-muted: #808793;
  --pk-accent: #3df5c8;
  --pk-accent-ink: #0b0b14;
  --pk-surface-strong: #1d3b40;
  --pk-on-strong: #e9f7ff;
  --pk-on-strong-muted: #93a8af;
}

[data-theme="selva"] {
  --pk-bg: #f5f0e2;
  --pk-surface: #ffffff;
  --pk-line: #e7dfc8;
  --pk-ink: #2a2412;
  --pk-ink-muted: #6e6a5e;
  --pk-accent: #1f6b4f;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #2a2412;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #959289;
}

/* ---------- Valle (por defecto de la app): granja en pixel art ---------- */

[data-theme="valle"] {
  --pk-bg: #8fcf6a;
  --pk-surface: #fbeccb;
  --pk-line: #d9b27a;
  --pk-ink: #3b2414;
  --pk-ink-muted: #74512f;
  --pk-accent: #2c7a33;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #5b3a1e;
  --pk-on-strong: #fff3d6;
  --pk-on-strong-muted: #e6c793;
  --pk-done: #23722b;
  --pk-done-soft: #d6efb8;
  --pk-missed: #b3261e;
  --pk-missed-soft: #f9d6c8;
  --pk-pending: #8a4b00;
  --pk-pending-soft: #ffe7a8;
}

/* ---------- Estilo bloques (mundo de cubos, original) ---------- */

[data-theme="bloques"] {
  --pk-bg: #866043;
  --pk-surface: #c6c6c6;
  --pk-line: #8b8b8b;
  --pk-ink: #262626;
  --pk-ink-muted: #4a4a4a;
  --pk-accent: #2f7a1f;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #3b3b3b;
  --pk-on-strong: #ffffff;
  --pk-on-strong-muted: #cfcfcf;
  --pk-points: #ffd83d;
  --pk-done: #237a23;
  --pk-done-soft: #bfe3b0;
  --pk-missed: #a8261f;
  --pk-missed-soft: #f0c0bb;
  --pk-pending: #6e4a00;
  --pk-pending-soft: #f5e2a0;
}

[data-theme="bloques-cueva"] {
  --pk-bg: #2b2b31;
  --pk-surface: #b4b4bc;
  --pk-line: #7d7d86;
  --pk-ink: #1b1b20;
  --pk-ink-muted: #3f3f48;
  --pk-accent: #1f8fa8;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #1c1c21;
  --pk-on-strong: #f2f6ff;
  --pk-on-strong-muted: #b4bccc;
  --pk-points: #5fe3f0;
  --pk-done: #1d7a3a;
  --pk-done-soft: #bfe3c8;
  --pk-missed: #a8261f;
  --pk-missed-soft: #f0c0bb;
  --pk-pending: #6e4a00;
  --pk-pending-soft: #f5e2a0;
}

[data-theme="bloques-desierto"] {
  --pk-bg: #d6bf86;
  --pk-surface: #f1e6c4;
  --pk-line: #c9b07a;
  --pk-ink: #3a2a14;
  --pk-ink-muted: #6b5530;
  --pk-accent: #a35a1c;
  --pk-accent-ink: #ffffff;
  --pk-surface-strong: #7a4a26;
  --pk-on-strong: #fff6dc;
  --pk-on-strong-muted: #ecd4a6;
  --pk-points: #ffd83d;
  --pk-done: #2f7a1f;
  --pk-done-soft: #d6efb8;
  --pk-missed: #a8261f;
  --pk-missed-soft: #f6cfc4;
  --pk-pending: #7a4b00;
  --pk-pending-soft: #ffe7a8;
}