/* ============================================================
   Tarot Tiziana Juegos - Tokens visuales (colors + type).
   Adaptado del UI Kit de Claude Design.
   Todo lo que aqui se define se aplica solo dentro de un
   contenedor .tdt-juegos-app (clase raiz que pone el frontend
   del plugin). Asi no afectamos al tema del sitio.
   ============================================================ */

/* --- Fuentes --------------------------------------------------
   Las rutas son relativas al fichero CSS. CSS vive en
   assets/css/ y las fuentes en assets/fonts/.
   ------------------------------------------------------------- */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/Fraunces-VariableFont.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/Fraunces-Italic-VariableFont.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-VariableFont.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   COLOR TOKENS - Modo oscuro (default).
   ============================================================ */

.tdt-juegos-app,
.tdt-juegos-app[data-theme="dark"] {
	/* Brand core */
	--violet-deep:      #451952;
	--burgundy:         #662549;
	--rose-wine:        #AE445A;
	--orange:           #F39F5A;
	--orange-deep:      #E08544;
	--cream:            #F5E9DC;
	--moonstone:        #D4CBC4;
	--gold-deep:        #B8860B;
	--gold-light:       #FFD89B;
	--gold-shadow:      #5C2A0E;
	--gold-mid:         #8B4513;

	/* Backgrounds */
	--bg-mobile:        #1A0B1F;
	--bg-violet:        #2D0F3A;
	--bg-desktop:       #0D0612;

	/* Glassmorphism */
	--glass-bg:         rgba(245, 233, 220, 0.06);
	--glass-bg-strong:  rgba(245, 233, 220, 0.10);
	--glass-border:     rgba(245, 233, 220, 0.14);
	--glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.35);
	--orange-glow:      rgba(243, 159, 90, 0.35);
	--orange-glow-soft: rgba(243, 159, 90, 0.20);

	/* Roles semanticos */
	--bg:             var(--bg-mobile);
	--bg-extended:    var(--bg-desktop);
	--surface:        var(--violet-deep);
	--surface-accent: var(--burgundy);
	--fg:             var(--cream);
	--fg-muted:       var(--moonstone);
	--fg-on-accent:   var(--cream);
	--accent:         var(--orange);
	--accent-deep:    var(--orange-deep);
	--danger:         var(--rose-wine);
	--success:        #6FB68A;

	/* Gradientes principales */
	--bg-gradient-mobile:
		radial-gradient(ellipse at 50% 0%,
			var(--violet-deep) 0%,
			var(--bg-violet) 45%,
			var(--bg-mobile) 100%);
	--bg-gradient-desktop:
		radial-gradient(ellipse at 50% 0%,
			var(--violet-deep) 0%,
			var(--bg-violet) 30%,
			var(--bg-desktop) 70%);

	--hero-gradient:
		linear-gradient(160deg, var(--violet-deep) 0%, var(--burgundy) 100%);

	--pentacle-gradient:
		radial-gradient(circle at 35% 30%,
			var(--gold-light) 0%,
			var(--orange) 55%,
			var(--gold-mid) 100%);

	--cta-gradient:
		linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
	--cta-shadow:
		0 8px 24px rgba(243, 159, 90, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);

	/* Sombras */
	--shadow-card:        0 8px 32px rgba(0, 0, 0, 0.35);
	--shadow-elevated:    0 30px 80px rgba(0, 0, 0, 0.60);
	--shadow-card-hover:  0 12px 40px rgba(0, 0, 0, 0.45),
	                      0 0 24px rgba(243, 159, 90, 0.22);

	/* Tipografia */
	--font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
	                "Helvetica Neue", Arial, sans-serif;
	--font-tabular: var(--font-body);

	/* Escala mobile-first (px del brief) */
	--fs-score:     64px;
	--fs-h1:        32px;
	--fs-timer:     30px;
	--fs-h2:        26px;
	--fs-h3:        22px;
	--fs-question:  19px;
	--fs-game-name: 18px;
	--fs-letter:    16px;
	--fs-option:    16px;
	--fs-num:       16px;
	--fs-body:      13px;
	--fs-meta:      11px;
	--fs-eyebrow:   11px;
	--fs-nav:       10px;

	/* Espaciado y radios */
	--tracking-eyebrow:      0.16em;
	--tracking-eyebrow-wide: 0.20em;
	--tracking-tight:        -0.01em;
	--lh-display:   1.10;
	--lh-question:  1.35;
	--lh-body:      1.40;
	--lh-tight:     1.20;

	--s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
	--s-5:  20px; --s-6:  24px; --s-7:  32px; --s-8:  40px;
	--s-9:  56px; --s-10: 72px;

	--r-pill:        100px;
	--r-circle:      50%;
	--r-button:      20px;
	--r-card:        20px;
	--r-card-hero:   26px;
	--r-modal:       28px;
	--r-card-sm:     14px;
	--r-card-frame:  10px;

	--ease-out-soft: cubic-bezier(.22, 1, .36, 1);
	--ease-elastic:  cubic-bezier(.34, 1.56, .64, 1);
	--t-fast:        140ms;
	--t-base:        200ms;
	--t-slow:        300ms;
}

/* ============================================================
   COLOR TOKENS - Modo claro Pergamino & Sepia.
   ============================================================ */

.tdt-juegos-app[data-theme="light"] {
	--parchment:        #F4E8D2;
	--parchment-aged:   #E8DDC4;
	--parchment-deep:   #D4C5A8;
	--ink-sepia:        #3D2817;
	--ink-medium:       #5B3010;
	--wine-sepia:       #7A3127;
	--gold-aged:        #C9A24A;
	--gold-light-aged:  #FFE4B5;

	/* Mapeo de tokens del modo oscuro al modo pergamino. */
	--orange:           var(--wine-sepia);
	--orange-deep:      #5B2018;
	--cream:            #F4E8D2;
	--moonstone:        #8B6F4E;
	--gold-deep:        #8B6914;
	--gold-light:       var(--gold-light-aged);

	--violet-deep:      #3D2817;
	--burgundy:         #7A3127;
	--rose-wine:        #9C5446;

	--bg-mobile:        var(--parchment);
	--bg-violet:        var(--parchment-aged);
	--bg-desktop:       var(--parchment-deep);

	/* v0.30.27b: superficies translúcidas subidas de cuerpo. Al 2-7%
	   el sepia era casi idéntico al pergamino → tarjetas lavadas. Estos
	   valores las despegan del fondo sin abandonar la paleta. */
	--glass-bg:         rgba(61, 40, 23, 0.07);
	--glass-bg-strong:  rgba(61, 40, 23, 0.12);
	--glass-border:     rgba(61, 40, 23, 0.18);
	--glass-shadow:     0 8px 24px rgba(61, 40, 23, 0.18);
	--orange-glow:      rgba(122, 49, 39, 0.20);
	--orange-glow-soft: rgba(122, 49, 39, 0.10);

	--bg:             var(--parchment);
	--bg-extended:    var(--parchment-deep);
	--surface:        rgba(61, 40, 23, 0.07);
	--surface-accent: rgba(122, 49, 39, 0.10);
	--fg:             var(--ink-sepia);
	--fg-muted:       var(--ink-medium);
	--fg-on-accent:   var(--parchment);
	--accent:         var(--wine-sepia);
	--accent-deep:    #5B2018;
	--danger:         #9C5446;

	--bg-gradient-mobile:
		radial-gradient(ellipse at 50% 0%,
			var(--parchment) 0%,
			var(--parchment-aged) 50%,
			var(--parchment-deep) 100%);
	--bg-gradient-desktop: var(--bg-gradient-mobile);

	--hero-gradient:
		linear-gradient(160deg, var(--ink-sepia) 0%, var(--wine-sepia) 100%);

	--pentacle-gradient:
		radial-gradient(circle at 35% 30%,
			var(--gold-light-aged) 0%,
			var(--gold-aged) 60%,
			#7A5A1A 100%);

	--cta-gradient:
		linear-gradient(180deg, var(--wine-sepia) 0%, #5B2018 100%);
	--cta-shadow:
		0 6px 18px rgba(122, 49, 39, 0.30),
		inset 0 1px 0 rgba(255, 240, 220, 0.30);

	--shadow-card:        0 6px 22px rgba(61, 40, 23, 0.16);
	--shadow-elevated:    0 24px 60px rgba(61, 40, 23, 0.30);
	--shadow-card-hover:  0 10px 32px rgba(61, 40, 23, 0.22),
	                      0 0 18px rgba(122, 49, 39, 0.18);
}

/* ============================================================
   Escalado de tipografia en desktop dentro del contenedor.
   El brief sube ~10-15% en pantallas >=768px.
   ============================================================ */
@media (min-width: 768px) {
	/* v0.30.30: se listan los tres selectores ([data-theme] incluidos) porque
	   los tokens base se definen en .tdt-juegos-app[data-theme="dark"]/["light"]
	   (especificidad 0,2,0); un override solo en .tdt-juegos-app (0,1,0) quedaba
	   sombreado en ambos temas y el escalado desktop no se aplicaba. Mismo
	   patrón que el @media ≤480 de v0.30.27.1. */
	.tdt-juegos-app,
	.tdt-juegos-app[data-theme="dark"],
	.tdt-juegos-app[data-theme="light"] {
		--fs-score:     72px;
		--fs-h1:        38px;
		--fs-h2:        30px;
		--fs-h3:        24px;
		--fs-question:  22px;
		--fs-game-name: 20px;
		--fs-option:    17px;
	}
}

/* v0.30.27: en móvil pequeño los títulos H1/H2 ocupaban demasiado vertical.
   Se reducen ~15%. Se listan los tres selectores ([data-theme] incluidos)
   porque los tokens base se definen en .tdt-juegos-app[data-theme="dark"]
   (especificidad 0,2,0); un override solo en .tdt-juegos-app (0,1,0) quedaría
   sombreado en modo oscuro (mismo motivo por el que el bump de ≥768 no
   aplica en oscuro — anotado como hallazgo aparte). */
@media (max-width: 480px) {
	.tdt-juegos-app,
	.tdt-juegos-app[data-theme="dark"],
	.tdt-juegos-app[data-theme="light"] {
		--fs-h1: 27px;
		--fs-h2: 22px;
	}
}

/* ============================================================
   Tipografia helper. Solo se aplica dentro de .tdt-juegos-app
   para no contaminar el tema del sitio.
   ============================================================ */

.tdt-juegos-app {
	font-family: var(--font-body);
	font-size: var(--fs-option);
	line-height: var(--lh-body);
	color: var(--fg);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.tdt-juegos-app .t-h1 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	color: var(--fg);
	margin: 0;
}

.tdt-juegos-app .t-h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	color: var(--fg);
	margin: 0;
}

.tdt-juegos-app .t-h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	color: var(--fg);
	margin: 0;
}

.tdt-juegos-app .t-question {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-question);
	line-height: var(--lh-question);
	text-wrap: pretty;
	color: var(--fg);
}
.tdt-juegos-app[data-theme="light"] .t-question {
	font-style: italic;
}

.tdt-juegos-app .t-game-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-game-name);
	letter-spacing: var(--tracking-tight);
	color: var(--fg);
}

.tdt-juegos-app .t-option {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-option);
	line-height: 1.30;
	color: var(--fg);
}

.tdt-juegos-app .t-letter {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-letter);
	font-feature-settings: "tnum" 1;
}
.tdt-juegos-app[data-theme="light"] .t-letter {
	font-style: italic;
}

.tdt-juegos-app .t-num {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-num);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--fg);
}

.tdt-juegos-app .t-timer {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fs-timer);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.02em;
	color: var(--fg);
}

.tdt-juegos-app .t-score {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-score);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: 1;
	background: linear-gradient(180deg, var(--gold-light) 0%, var(--orange) 60%, var(--gold-mid) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tdt-juegos-app .t-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}
.tdt-juegos-app[data-theme="light"] .t-eyebrow {
	color: var(--gold-aged);
}

.tdt-juegos-app .t-meta {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-meta);
	color: var(--fg-muted);
	opacity: 0.8;
}

.tdt-juegos-app .t-body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg);
}

.tdt-juegos-app .t-monogram {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
}

.tdt-juegos-app .tnum {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}