/*
 * 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;
}