/*
 * hub-front-themes E1.F1.T3 (req. 1.4, 7.3, D5, D9): tokens de los 4 themes. Mismos roles en todos (un componente se
 * escribe una vez y cada theme lo viste); los valores son los hex medidos en los marcos del canvas (design-spec.md,
 * "Color system"). La prueba tests/app/tokens.test.mjs los compara con tests/app/tokens.json.
 * Un theme desconocido no llega aquí: el script en línea de index.html pone data-theme="casino" (req. 1.1).
 */

:root {
  /* Espaciado medido en los marcos (base 2 px) */
  --space-0_5: 2px; --space-1: 4px; --space-1_5: 6px; --space-2: 8px; --space-2_5: 10px; --space-3: 12px;
  --space-3_5: 14px; --space-4: 16px; --space-4_5: 18px; --space-5: 20px; --space-5_5: 22px; --space-6: 24px;
  --space-7: 28px; --space-7_5: 30px; --space-13: 52px; --space-24: 96px;
  /* Movimiento [a aprobar en el design-spec]: nada dura más de 300 ms */
  --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --t-tap: 44px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-base: 100ms; --duration-slow: 100ms; }
}

[data-theme="casino"] {
  --t-bg: #0E2A22;
  --t-surface: rgba(8, 26, 20, 0.78);
  --t-surface-2: rgba(14, 42, 34, 0.85);
  --t-modal: #0A1F18;
  --t-border: #7A6230;
  --t-border-strong: #D9A845;
  --t-text: #F4E6C4;
  --t-text-2: #CDBB92;
  --t-accent: #E3B85A;
  --t-on-accent: #1B1206;
  --t-link: #F2D38A;
  --t-link-hover: #FFF1C7;
  --t-me-bg: rgba(217, 168, 69, 0.18);
  --t-me-fg: #F2D38A;
  --t-live: #F2D38A;
  --t-wait: #CDBB92;
  --t-nav-bg: rgba(8, 20, 16, 0.92);
  --t-error: #B8401F;
  --t-art-wide: url(/themes/casino/bg-wide.webp);
  --t-art-tall: url(/themes/casino/bg-tall.webp);
  --t-font-display: Cinzel, serif;
  --t-font-text: Jost, system-ui, sans-serif;
  --t-font-accent: 'Cormorant Garamond', serif;
  --t-radius-panel: 16px; --t-radius-card: 14px; --t-radius-btn: 999px; --t-radius-avatar: 50%; --t-radius-icon: 50%;
  --t-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.6);
  --t-shadow-sheet: -24px 0 60px rgba(0, 0, 0, 0.5);
  --t-focus: 0 0 0 2px #0E2A22, 0 0 0 4px #F2D38A;
  --t-chip: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  color-scheme: dark;
}

[data-theme="neon"] {
  --t-bg: #0B0B14;
  --t-surface: #15152A;
  --t-surface-2: #1E1E3A;
  --t-modal: #15152A;
  --t-hero: #1B1640;
  --t-hero-2: #231C58;
  --t-border: #2E2D52;
  --t-border-strong: #3A3470;
  --t-text: #EDEBFF;
  --t-text-2: #A9A6C9;
  --t-accent: #FF4455;
  --t-on-accent: #0B0B14;
  --t-accent-2: #3DE0FF;
  --t-link: #3DE0FF;
  --t-link-hover: #9CEEFF;
  --t-me-bg: #2A1830;
  --t-me-fg: #FF7A8A;
  --t-live: #C6F432;
  --t-wait: #A9A6C9;
  --t-nav-bg: #15152A;
  --t-error: #FF4455;
  --t-art-wide: url(/themes/neon/bg-wide.webp);
  --t-art-tall: url(/themes/neon/bg-tall.webp);
  --t-font-display: Unbounded, system-ui, sans-serif;
  --t-font-text: Manrope, system-ui, sans-serif;
  --t-font-accent: 'JetBrains Mono', ui-monospace, monospace;
  --t-radius-panel: 16px; --t-radius-card: 14px; --t-radius-btn: 12px; --t-radius-avatar: 50%; --t-radius-icon: 12px;
  --t-shadow-modal: none;
  --t-shadow-sheet: none;
  --t-focus: 0 0 0 2px #15152A, 0 0 0 4px #EDEBFF;
  --t-chip: none;
  color-scheme: dark;
}

[data-theme="recreo"] {
  --t-bg: #FBF4E6;
  --t-surface: #FFFFFF;
  --t-surface-2: #FFFFFF;
  --t-modal: #FFFFFF;
  --t-band: #1F1A14;
  --t-band-2: #2C251D;
  --t-border: #1F1A14;
  --t-border-strong: #1F1A14;
  --t-border-soft: #D9CFBF;
  --t-segment: #F1E7D6;
  --t-text: #1F1A14;
  --t-text-2: #5C5246;
  --t-text-on-band: #CFC6B8;
  --t-accent: #F2B632;
  --t-on-accent: #1F1A14;
  --t-brand: #E4572E;
  --t-orange-strong: #C2451F;
  --t-link: #B8401F;
  --t-link-hover: #8E2F14;
  --t-me-bg: #FDEBD3;
  --t-me-fg: #1F1A14;
  --t-live: #5BD18B;
  --t-wait: #5C5246;
  --t-nav-bg: #FFFFFF;
  --t-error: #C2451F;
  --t-art-wide: url(/themes/recreo/bg-wide.webp);
  --t-art-tall: url(/themes/recreo/bg-tall.webp);
  --t-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --t-font-text: Figtree, system-ui, sans-serif;
  --t-font-accent: Figtree, system-ui, sans-serif;
  --t-radius-panel: 20px; --t-radius-card: 16px; --t-radius-btn: 12px; --t-radius-avatar: 50%; --t-radius-icon: 12px;
  --t-shadow-card: 4px 4px 0 #1F1A14;
  --t-shadow-btn: 3px 3px 0 #1F1A14;
  --t-shadow-modal: 5px 5px 0 #1F1A14;
  --t-shadow-sheet: 5px 5px 0 #1F1A14;
  --t-focus: 0 0 0 2px #FBF4E6, 0 0 0 4px #E4572E;
  --t-chip: none;
  color-scheme: light;
}

[data-theme="cuaderno"] {
  --t-bg: #F7F5EE;
  --t-grid: #DCE3F0;
  --t-surface: #FFFFFF;
  --t-surface-2: #FFF3A6;
  --t-modal: #FFFFFF;
  --t-note-1: #FFF3A6; --t-note-2: #CDEBFF; --t-note-3: #FFD3D0; --t-note-4: #D5F0D2; --t-note-5: #E3D8FA;
  --t-border: #1E2B5C;
  --t-border-strong: #1E2B5C;
  --t-border-soft: #B9C3DA;
  --t-text: #1E2B5C;
  --t-text-2: #1E2B5C;
  --t-text-3: #7C87A6;
  --t-accent: #1E2B5C;
  --t-on-accent: #FFFFFF;
  --t-red: #D9483B;
  --t-red-strong: #B3372C;
  --t-highlight: #FFE45C;
  --t-link: #B3372C;
  --t-link-hover: #1E2B5C;
  --t-me-bg: #FFE45C;
  --t-me-fg: #1E2B5C;
  --t-live: #D9483B;
  --t-wait: #1E2B5C;
  --t-nav-bg: #FFFFFF;
  --t-error: #B3372C;
  --t-art-wide: url(/themes/cuaderno/bg-wide.webp);
  --t-art-tall: url(/themes/cuaderno/bg-tall.webp);
  --t-font-display: Fraunces, Georgia, serif;
  --t-font-text: 'Work Sans', system-ui, sans-serif;
  --t-font-accent: Caveat, 'Comic Sans MS', cursive;
  --t-radius-panel: 8px; --t-radius-card: 8px; --t-radius-btn: 8px; --t-radius-avatar: 50%; --t-radius-icon: 12px;
  --t-shadow-card: 0 4px 10px rgba(30, 43, 92, 0.14);
  --t-shadow-modal: 0 8px 20px rgba(30, 43, 92, 0.16);
  --t-shadow-sheet: -10px 0 24px rgba(30, 43, 92, 0.25);
  --t-focus: 0 0 0 2px #F7F5EE, 0 0 0 4px #D9483B;
  --t-chip: none;
  color-scheme: light;
}

/*
 * hub-theme-zen (D1–D5): Noche (noche estrellada) y Bruma (mañana con neblina). Mismos roles que los otros 4; valores
 * del mockup aprobado (docs/spec/changes/hub-theme-zen/mockup.html y design-notes.md, contraste AA ≥ 4,5:1 medido).
 * Comparten tipografía (Newsreader + Nunito Sans), radios y la piedra de río de los íconos (--t-radius-icon).
 * --z-*: tokens propios de themes/zen.css (panel opaco para mezclar transparencias, estrellas, sol, neblina).
 */
[data-theme="noche"] {
  --t-bg: #0B1120;
  --t-surface: rgba(18, 26, 40, 0.78);
  --t-surface-2: rgba(30, 40, 58, 0.80);
  --t-modal: #141C2B;
  --t-border: #2A3850;
  --t-border-strong: #5B7186;
  --t-text: #EEEAE0;
  --t-text-2: #AEB8C2;
  --t-accent: #B5CCA8;
  --t-on-accent: #13211A;
  --t-link: #E2CF9E;
  --t-link-hover: #F4E8C6;
  --t-me-bg: rgba(181, 204, 168, 0.16);
  --t-me-fg: #D3E5C8;
  --t-live: #9ED8CB;
  --t-wait: #AEB8C2;
  --t-nav-bg: rgba(11, 17, 32, 0.92);
  --t-error: #EFA595;
  --t-art-wide: url(/themes/noche/bg-wide.webp);
  --t-art-tall: url(/themes/noche/bg-tall.webp);
  --t-font-display: Newsreader, Georgia, 'Times New Roman', serif;
  --t-font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-font-accent: Newsreader, Georgia, serif;
  --t-radius-panel: 22px; --t-radius-card: 18px; --t-radius-btn: 999px; --t-radius-avatar: 50%; --t-radius-icon: 46% 54% 52% 48% / 50% 46% 54% 50%;
  --t-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 40px rgba(0, 0, 0, 0.32);
  --t-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.55);
  --t-shadow-sheet: -24px 0 60px rgba(0, 0, 0, 0.45);
  --t-focus: 0 0 0 2px #0B1120, 0 0 0 4px #E2CF9E;
  --t-chip: none;
  --z-panel: #121A28; --z-panel-2: #1E283A; --z-deep: #0B1120;
  --z-star: #F3E9CF; --z-sun: #E2CF9E; --z-mist: rgba(243, 233, 207, 0.08);
  color-scheme: dark;
}

[data-theme="bruma"] {
  --t-bg: #F2EEE6;
  --t-surface: rgba(251, 249, 244, 0.88);
  --t-surface-2: #FFFFFF;
  --t-modal: #FFFFFF;
  --t-border: #DDD5C7;
  --t-border-strong: #7A8B76;
  --t-text: #22302A;
  --t-text-2: #56625B;
  --t-accent: #4A6B55;
  --t-on-accent: #FFFFFF;
  --t-link: #36596A;
  --t-link-hover: #24404D;
  --t-me-bg: #E3EBDD;
  --t-me-fg: #22302A;
  --t-live: #2F7565;
  --t-wait: #56625B;
  --t-nav-bg: rgba(251, 249, 244, 0.94);
  --t-error: #9E4334;
  --t-art-wide: url(/themes/bruma/bg-wide.webp);
  --t-art-tall: url(/themes/bruma/bg-tall.webp);
  --t-font-display: Newsreader, Georgia, 'Times New Roman', serif;
  --t-font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-font-accent: Newsreader, Georgia, serif;
  --t-radius-panel: 22px; --t-radius-card: 18px; --t-radius-btn: 999px; --t-radius-avatar: 50%; --t-radius-icon: 46% 54% 52% 48% / 50% 46% 54% 50%;
  --t-shadow-card: 0 1px 2px rgba(34, 48, 42, 0.06), 0 10px 30px rgba(34, 48, 42, 0.08);
  --t-shadow-modal: 0 24px 60px rgba(34, 48, 42, 0.18);
  --t-shadow-sheet: -16px 0 40px rgba(34, 48, 42, 0.14);
  --t-focus: 0 0 0 2px #F2EEE6, 0 0 0 4px #36596A;
  --t-chip: none;
  --z-panel: #FBF9F4; --z-panel-2: #FFFFFF; --z-deep: #E9E4DA;
  --z-star: #FFFFFF; --z-sun: #E4B48A; --z-mist: rgba(255, 255, 255, 0.72);
  color-scheme: light;
}