/* WinUp design tokens: the single source of color, type, space and shape.
   Names describe function, never hue. New CSS consumes var(--gj-*) only.
   Spec: docs/superpowers/specs/2026-09-26-fundacion-diseno-jugador-design.md */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit: solo el wordmark «WinUp» (mockup Explorar v2 aprobado 2026-09-28). La interfaz sigue en Plus Jakarta Sans. */
@font-face {
  font-family: "Outfit";
  src: url("assets/fonts/outfit-var-latin.woff2") format("woff2"), url("assets/fonts/outfit-var.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Neutrals: pure charcoal, no blue tint */
  --gj-bg: #0b0b0e;
  --gj-surface-1: #141418;
  --gj-surface-2: #1c1c22;
  --gj-line: #2a2a32;
  --gj-text: #f5f5f7;
  --gj-text-2: #a3a3ae;

  /* Brand: fills vs text are separate tones for contrast */
  --gj-brand: #e6007e;
  --gj-brand-pressed: #b8006a;
  /* Texto de marca = el mismo magenta del logo (decisión del operador 2026-09-27/28: nada de rosa #ff3d9e) */
  --gj-brand-text: #e6007e;
  --gj-brand-soft: rgb(230 0 126 / .14);
  --gj-on-brand: #ffffff;

  /* Neon is reserved for winning and urgency */
  --gj-win: #baff59;
  --gj-win-bg: transparent;

  /* Medal tones for achievements and podium (gamer layer) */
  --gj-gold: #ffcf4a;
  --gj-gold-deep: #c98a00;
  --gj-win-deep: #6bb800;
  --gj-silver: #d9dde6;
  --gj-silver-deep: #8a93a6;
  --gj-bronze: #f0a86a;
  --gj-bronze-deep: #a5582a;
  --gj-violet: #7b3fe4;

  /* Status colors, never the brand magenta */
  --gj-success: #3ddc97;
  --gj-warning: #ffb020;
  --gj-danger: #ff5a3c;

  /* Theme nuevo del Jugador (mockup Explorar v2 aprobado 2026-09-28). Los acentos de marca van en
     --gj-brand (#E6007E, el botón del logo), nunca en rosa; si un texto chico pierde contraste, sube peso o tamaño. */
  --gj-brand-bright: #ff2b9c;
  --gj-brand-deep: #b00061;
  --gj-brand-glow: rgb(230 0 126 / .5);
  /* «Jugar» por un premio: el verde apagado de la referencia del operador. No es el neón de ganar (--gj-win). */
  --gj-play: #a0e461;
  --gj-play-strong: #c8f59a;
  --gj-play-bg: linear-gradient(180deg, #2a3d23 0%, #243620 55%, #1c2a1a 100%);
  --gj-play-bg-strong: linear-gradient(180deg, #2f4a24 0%, #22361c 60%, #1a2a16 100%);
  --gj-play-line: rgb(160 228 97 / .22);
  --gj-play-glow: rgb(160 228 97 / .35);
  /* Contador sin intentos (rojo-naranja, nunca magenta) */
  --gj-out: #ff7a5c;
  --gj-out-bg: linear-gradient(180deg, #3d1714, #2a0f0d);
  --gj-out-line: rgb(255 90 60 / .45);
  --gj-on-warning: #1a1000;
  /* Insignia Premium: diamante, borde magenta → violeta → oro */
  --gj-premium: #ffe39a;
  --gj-premium-bg: linear-gradient(180deg, #221433, #150c20);
  --gj-premium-ring: linear-gradient(110deg, #e6007e, #8a5cff 50%, #ffcf4a);
  --gj-premium-glow: rgb(138 92 255 / .35);
  /* Patrocinador: etiqueta y acento del negocio que presenta (demo: Café del Sol) */
  --gj-sponsor: #ffb02e;
  /* Banner de marca (destacado, Ubicación, Premium, ¡Ganaste!): fondo vino → magenta y cubos del escenario */
  --gj-banner-bg: linear-gradient(120deg, #140610 0%, #2e0a20 45%, #6a0c42 100%);
  --gj-cube: linear-gradient(160deg, #3a2331 0%, #1a0d15 70%);

  --gj-focus: #e6007e;
  --gj-scrim: linear-gradient(180deg, rgb(11 11 14 / 0) 35%, rgb(11 11 14 / .9) 85%);
  /* Foto alta con texto y botón encima (bienvenida): oscurece desde la mitad */
  --gj-scrim-tall: linear-gradient(180deg, rgb(11 11 14 / .18) 0%, rgb(11 11 14 / .22) 28%, rgb(11 11 14 / .76) 57%, rgb(11 11 14 / .97) 100%);
  --gj-glass: rgb(11 11 14 / .68);

  /* Text over photography always sits on a dark scrim, so these do not change with the theme */
  --gj-on-photo: #ffffff;
  --gj-on-photo-2: #e8e8ec;
  --gj-on-photo-brand: #e6007e;
  --gj-on-photo-win: #baff59;
  --gj-device: #050507;
  /* Redeem screen is always paper-white so cashier scanners read it in any theme */
  --gj-scan-bg: #ffffff;
  --gj-scan-ink: #0b0b0e;
  --gj-scan-ink-2: #5f5d66;
  --gj-google-blue: #4285f4;
  /* Marcas externas en botones de compartir (reconocibles, iguales en ambos temas) */
  --gj-whatsapp: #25d366;
  --gj-on-whatsapp: #062b14;
  --gj-instagram: linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf);
  --gj-facebook: #1877f2;
  --gj-tiktok: #010101;
  --gj-tiktok-cyan: #25f4ee;
  --gj-tiktok-red: #fe2c55;

  /* Type */
  --gj-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gj-font-brand: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --gj-fs-1: 11px;
  --gj-fs-2: 12px;
  --gj-fs-3: 14px;
  --gj-fs-4: 16px;
  --gj-fs-5: 20px;
  --gj-fs-6: 24px;
  --gj-fs-7: 32px;

  /* Space (4px base) */
  --gj-space-1: 4px;
  --gj-space-2: 8px;
  --gj-space-3: 12px;
  --gj-space-4: 16px;
  --gj-space-5: 20px;
  --gj-space-6: 24px;
  --gj-space-7: 28px;
  --gj-space-8: 32px;

  /* Shape and depth */
  --gj-radius-s: 10px;
  --gj-radius-m: 16px;
  --gj-radius-l: 22px;
  --gj-radius-pill: 999px;
  --gj-shadow-1: 0 18px 50px rgb(0 0 0 / .45);
  --gj-tap: 44px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --gj-bg: #f6f5f7;
  --gj-surface-1: #ffffff;
  --gj-surface-2: #efedf1;
  --gj-line: #e6e3e8;
  --gj-text: #141418;
  --gj-text-2: #6b6873;
  --gj-brand-text: #c4006b;
  --gj-brand-soft: rgb(230 0 126 / .1);
  --gj-win: #1f7a00;
  --gj-win-bg: #eaffd6;
  --gj-success: #16804f;
  --gj-warning: #9a5b00;
  --gj-danger: #c8321a;
  --gj-focus: #c4006b;
  --gj-shadow-1: 0 18px 50px rgb(20 20 24 / .14);
}

/* Panel dual aprobado: ámbito exclusivo Cliente. Sidebar conserva identidad oscura. */
body[data-system="cliente"] {
  --gj-panel-bg: #101115;
  --gj-panel-sidebar: #17181e;
  --gj-panel-surface: #1a1c23;
  --gj-panel-raised: #22252e;
  --gj-panel-line: #30333f;
  --gj-panel-text: #f5f6fa;
  --gj-panel-muted: #b2b7c6;
  --gj-panel-faint: #9299ac;
  --gj-panel-brand: #bd006b;
  --gj-panel-brand-hover: #a0005c;
  --gj-panel-brand-text: #ff82c1;
  --gj-panel-brand-soft: #402038;
  --gj-panel-success: #78e0b2;
  --gj-panel-success-bg: #183b30;
  --gj-panel-shadow: 0 4px 18px #00000014;
  --gj-panel-backdrop: #08090dbd;
  --gj-panel-white: #ffffff;
  --gj-panel-logo-bg: #17181e;
  --gj-panel-metric-1: linear-gradient(115deg, #6532d5, #8645df);
  --gj-panel-metric-2: linear-gradient(115deg, #006e8c, #007b90);
  --gj-panel-metric-3: linear-gradient(115deg, #a83d0d, #ba4b12);
  --gj-panel-metric-4: linear-gradient(115deg, #a21063, #c52c7b);
  --gj-panel-radius: 18px;
  --gj-panel-radius-small: 10px;
}
body[data-system="cliente"][data-client-theme="light"] {
  color-scheme: light;
  --gj-panel-bg: #f6f7fa;
  --gj-panel-sidebar: #ffffff;
  --gj-panel-surface: #ffffff;
  --gj-panel-raised: #f5f6f9;
  --gj-panel-line: #e4e6ed;
  --gj-panel-text: #252736;
  --gj-panel-muted: #5c6273;
  --gj-panel-faint: #656d7e;
  --gj-panel-brand-text: #a5005d;
  --gj-panel-brand-soft: #fbe8f2;
  --gj-panel-success: #14764f;
  --gj-panel-success-bg: #e6f6ed;
  --gj-panel-shadow: 0 3px 15px #25273606;
}

/* La identidad de la barra lateral permanece oscura en ambos temas. */
body[data-system="cliente"] .sidebar {
  --gj-panel-bg: #101115;
  --gj-panel-sidebar: #17181e;
  --gj-panel-surface: #1a1c23;
  --gj-panel-raised: #22252e;
  --gj-panel-line: #30333f;
  --gj-panel-text: #f5f6fa;
  --gj-panel-muted: #b2b7c6;
  --gj-panel-faint: #9299ac;
  --gj-panel-brand-text: #ff82c1;
  --gj-panel-brand-soft: #402038;
  color-scheme: dark;
  color: var(--gj-panel-text);
}

body[data-system="cliente"], body[data-system="cliente"] .sidebar {
  --gj-bg:var(--gj-panel-bg); --gj-surface-1:var(--gj-panel-surface); --gj-surface-2:var(--gj-panel-raised);
  --gj-line:var(--gj-panel-line); --gj-text:var(--gj-panel-text); --gj-text-2:var(--gj-panel-muted);
  --gj-brand-soft:var(--gj-panel-brand-soft); --gj-success:var(--gj-panel-success);
  --gj-shadow-1:var(--gj-panel-shadow); --gj-silver:var(--gj-panel-muted);
  --gj-radius-l:var(--gj-panel-radius); --gj-radius-s:var(--gj-panel-radius-small);
}
body[data-system="cliente"] { color-scheme:dark; }
body[data-system="cliente"][data-client-theme="light"] { color-scheme:light; --gj-brand-bright:var(--gj-brand-deep); --gj-warning:#9a5b00; --gj-danger:#c8321a; }
body[data-system="cliente"] .sidebar { color-scheme:dark; --gj-brand-bright:var(--gj-panel-brand-text); --text:var(--gj-text); --muted:var(--gj-text-2); --panel:var(--gj-surface-1); --panel2:var(--gj-surface-2); --line:var(--gj-line); }