/* HoloPlaza TCG — color system. TWO THEMES. Light is the default and the brand's original identity: white surfaces with the logo's crimson as the accent. Dark ("azul oscuro") is the 2025-26 storefront skin, kept as an opt-in theme via . Base palette below = raw values found in the codebase (Elementor kit 627, GeneratePress globals, the plugin CSS) plus the crimson sampled from assets/logo-holoplaza.png. Semantic aliases underneath are what components consume — never reference a raw --hp-* token from a component. */ :root{ /* ================= BASE PALETTE (theme-independent) ================= */ /* Brand */ --hp-red:#BB1823; /* sampled from the logo mark — LIGHT accent */ --hp-red-hover:#960f19; /* derived darker press state */ --hp-red-light:#d8323d; /* derived lighter hover for solid CTAs */ --hp-orange:#FF8C42; /* kit --e-global-color-text — DARK accent */ --hp-orange-hover:#e07535; --hp-orange-light:#ff9d5e; --hp-cream:#FFE9DA; /* kit dd8b130 — gradient tail */ --hp-blush:#FFE1E3; /* derived cream equivalent for the red gradient */ --hp-gold:#DCC754; /* kit accent — feature-tile hover borders */ --hp-teal-deep:#0D373F; /* header search glass */ --hp-teal:#3A3A42; /* "Más eventos" gradient tail */ /* Dark neutrals — gris neutro / casi negro (sin el tinte verdoso anterior) */ --hp-ink:#0d0d0f; /* kit primary / GP --contrast */ --hp-ink-2:#151517; --hp-surface:#1a1a1d; --hp-surface-hover:#242428; --hp-surface-alt:#101014; --hp-border:#2e2e33; --hp-border-strong:#42424a; /* Light neutrals (GeneratePress --base ladder + the header field ink) */ --hp-white:#ffffff; /* GP --base-3 */ --hp-paper:#f7f8f9; /* GP --base-2 */ --hp-paper-2:#f0f0f0; /* GP --base */ --hp-line:#e2e5e7; /* derived hairline for light surfaces */ --hp-line-strong:#cdd2d4; /* derived */ --hp-near-black:#14201f; /* header search input colour — light-mode body */ --hp-grey:#575760; /* GP --contrast-2 */ --hp-grey-2:#b2b2be; /* GP --contrast-3 */ --hp-black:#000000; /* Dark-theme text ladder (kept for reference/specimens) */ --hp-text-soft:#f2f2f3; --hp-text-soft-2:#e2e2e4; --hp-text-soft-3:#ededef; --hp-text-soft-4:#e0e0e0; --hp-text-muted:#9a9aa2; --hp-text-muted-2:#8a8a92; --hp-text-muted-3:#a2a2a8; --hp-text-muted-4:#b0b0b8; --hp-text-dim:#888888; --hp-text-dim-2:#999999; --hp-placeholder:#8a9296; --hp-field-border-dark:rgba(255,255,255,.45); /* Semantic (both themes) */ --hp-success:#66b520; --hp-success-2:#2ecc71; --hp-success-3:#4ade80; --hp-success-4:#27ae60; --hp-danger:#e74c3c; --hp-danger-hover:#c0392b; --hp-danger-2:#ef4444; --hp-danger-soft:#ff6b6b; --hp-sale:#a00; --hp-warning:#f1c40f; --hp-warning-2:#f39c12; --hp-info:#3498db; --hp-info-strong:#1565c0; --hp-purple:#9b59b6; --hp-purple-2:#a855f7; --hp-ledger-credit:#1a7f37; /* wallet ledger, production hexes */ --hp-ledger-debit:#b32d2e; /* Variantes claras para tema oscuro. Los hexes de produccion se pensaron sobre blanco: sobre el oscuro dan 3,42:1 el verde y 2,75:1 el rojo, los dos por debajo del minimo legible (4,5:1). Estos dan 6,84 y 5,18. */ --hp-ledger-credit-dark:#3fb950; --hp-ledger-debit-dark:#f85149; --hp-scrim:rgba(0,0,0,.5); --hp-scrim-strong:rgba(0,0,0,.7); --hp-tile-overlay:#00000070; /* Elementor tile overlay */ /* ===================== LIGHT THEME (default) ====================== */ --page-bg:var(--hp-white); /* Holo Premium medal ground: always the OPPOSITE of the page, so the disc punches out of the interface instead of blending into it. The iridescent --holo-foil ring rides around it. */ --medal-ground:var(--hp-ink); /* @kind color */ --surface-card:var(--hp-white); --surface-card-hover:var(--hp-paper); --surface-sunken:var(--hp-paper); /* fields, nested cards, table zebra */ --surface-raised:var(--hp-white); /* dropdowns, modals */ --surface-alt:var(--hp-paper-2); /* dense tool panels */ --surface-field:var(--hp-paper-2); /* header search pill on white chrome */ --plate:var(--hp-white); /* product-image plate — white always */ --text-heading:var(--hp-ink); --text-body:var(--hp-near-black); --text-secondary:var(--hp-grey); /* Real text, not a decorative tint: components use --text-muted for SKUs, stat labels, inactive tabs. #b2b2be (--hp-grey-2) only reached 2:1 on white, so that tint stays available as --hp-grey-2 for dividers/placeholders. */ --text-muted:#6b6b75; --placeholder:var(--hp-grey); --border-default:var(--hp-line); --border-strong:var(--hp-line-strong); --border-hairline:rgba(5,21,24,.12); --field-border:rgba(5,21,24,.25); --accent:var(--hp-red); --accent-hover:var(--hp-red-hover); --accent-light:var(--hp-red-light); --accent-contrast:var(--hp-white); /* text/glyphs ON the accent */ --accent-fill:rgba(187,24,35,.10); --accent-fill-strong:rgba(187,24,35,.18); --accent-fill-faint:rgba(187,24,35,.06); /* Abono y cargo del libro del monedero. Existen como token semantico para que el tema oscuro pueda cambiarlos: el plugin los pinta con un `style` en linea, y una declaracion en linea gana a cualquier selector, asi que desde CSS no habia forma de corregirlos. */ --ledger-credit:var(--hp-ledger-credit); --ledger-debit:var(--hp-ledger-debit); --gradient-cta:linear-gradient(90deg,#BB1823 -3.64%,#FFE1E3 108.96%); /* @kind color */ --gradient-events:linear-gradient(90deg,#14201f 3.64%,#5A6E70 108.96%); /* @kind color */ --success-fill:rgba(102,181,32,.12); --success-border:rgba(102,181,32,.45); --danger-fill:rgba(170,0,0,.08); --danger-border:rgba(170,0,0,.3); --stock-in:#3d6f12; /* #66b520 darkened enough to hold 4.5:1 on the 12%-tinted success fill, not just on plain white */ --stock-out:#c0392b; --link:var(--hp-ink); --link-hover:var(--accent); --focus-ring:var(--accent); /* Backwards-compatible aliases (older cards/specimens) */ --hp-text:var(--text-heading); --hp-orange-fill:var(--accent-fill); --hp-orange-fill-strong:var(--accent-fill-strong); --hp-orange-fill-faint:var(--accent-fill-faint); --hp-success-fill:var(--success-fill); --hp-success-border:var(--success-border); --hp-danger-fill:var(--danger-fill); --hp-danger-border:var(--danger-border); --hp-field-border:var(--field-border); --hp-gradient-cta:var(--gradient-cta); /* @kind color */ --hp-gradient-events:var(--gradient-events); /* @kind color */ --surface-1:var(--surface-card); } /* ======================== DARK THEME (opt-in) ======================== */ :root[data-theme="dark"]{ --page-bg:var(--hp-ink); --medal-ground:var(--hp-white); /* @kind color */ --surface-card:var(--hp-surface); --surface-card-hover:var(--hp-surface-hover); --surface-sunken:var(--hp-ink); --surface-raised:var(--hp-ink-2); --surface-alt:var(--hp-surface-alt); --surface-field:var(--hp-white); /* the white search pill on dark chrome */ --plate:var(--hp-white); --text-heading:var(--hp-white); --text-body:var(--hp-text-soft); --text-secondary:var(--hp-text-muted); --text-muted:var(--hp-text-muted-2); --placeholder:var(--hp-placeholder); --border-default:var(--hp-border); --border-strong:var(--hp-border-strong); --border-hairline:rgba(255,255,255,.14); --field-border:var(--hp-field-border-dark); --accent:var(--hp-orange); --accent-hover:var(--hp-orange-hover); --accent-light:var(--hp-orange-light); --accent-contrast:var(--hp-ink); --accent-fill:rgba(255,140,66,.12); --accent-fill-strong:rgba(255,140,66,.2); --accent-fill-faint:rgba(255,140,66,.08); /* El verde y el rojo del libro del monedero se pensaron sobre blanco. Sobre el fondo oscuro daban 3,42:1 y 2,75:1 — el rojo de los cargos era el peor de los dos y no lo habia mirado nadie. Estos dan 6,84 y 5,18. */ --ledger-credit:var(--hp-ledger-credit-dark); --ledger-debit:var(--hp-ledger-debit-dark); --gradient-cta:linear-gradient(90deg,#FF8C42 -3.64%,#FFE9DA 108.96%); /* @kind color */ --gradient-events:linear-gradient(90deg,#0d0d0f 3.64%,#3A3A42 108.96%); /* @kind color */ --success-fill:rgba(102,181,32,.12); --success-border:rgba(102,181,32,.3); --danger-fill:rgba(170,0,0,.15); --danger-border:rgba(170,0,0,.4); --stock-in:var(--hp-success); --stock-out:var(--hp-danger-soft); --link:var(--hp-white); --link-hover:var(--accent); }