/* Custom Styles - Variação 1 (meucupom.top - TikTok Neon Verde) */
/* Import base styles */
@import url('style.css');

/* ================= THEME VARIABLES - TIKTOK ================= */
:root {
    --tiktok-bg: #010101;
    --tiktok-surface: #121212;
    --tiktok-surface-soft: #1b1b1f;
    --tiktok-border: #292929;
    --tiktok-muted: #1f1f23;
    --tiktok-text-primary: #f5f5f5;
    --tiktok-text-secondary: #d0d0d2;
    --tiktok-text-muted: #9d9da3;

    --accent: #00f2ab;          /* TikTok neon green */
    --accent-hover: #00c48a;
    --accent-contrast: #010101;
    --accent-soft: #66ffd3;

    --minha: #00f2ab;           /* Neon green principal */
    --ilimitado: #00d88c;       /* Verde aqua */
    --conquiste: #59ffb5;       /* Verde-lima suave */

    --notice-bg: #0d261e;
    --notice-border: #00f2ab;
    --notice-text: #c7ffef;
}

body {
    background-color: var(--tiktok-bg) !important;
    color: var(--tiktok-text-primary) !important;
}

/* === Override principais utilitários Tailwind usados no site === */
.bg-gray-900,
.bg-gray-950,
body.bg-gray-900 {
    background-color: var(--tiktok-bg) !important;
}

.bg-gray-800,
.bg-gray-850 {
    background-color: var(--tiktok-surface) !important;
}

.bg-gray-700 {
    background-color: var(--tiktok-surface-soft) !important;
}

.border-gray-700,
.border-gray-800,
.border-gray-900,
.border-gray-700\/50,
.border-gray-800\/50 {
    border-color: var(--tiktok-border) !important;
}

.text-gray-100,
.text-gray-200,
.text-white {
    color: var(--tiktok-text-primary) !important;
}

.text-gray-300,
.text-gray-400 {
    color: var(--tiktok-text-secondary) !important;
}

.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--tiktok-text-muted) !important;
}

.bg-black\/40,
.bg-black\/50,
.bg-black\/60 {
    background-color: rgba(1, 1, 1, 0.65) !important;
}

.shadow-lg,
.shadow-md,
.shadow {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Inputs, cards e blocos */
.bg-gray-800 .border,
.bg-gray-900 .border,
.bg-gray-900 .rounded,
.bg-gray-800 .rounded {
    border-color: var(--tiktok-border) !important;
}

section,
main,
.card,
.rounded,
.rounded-lg,
.rounded-xl {
    background-clip: padding-box;
}

.btn-primary {
    box-shadow: 0 12px 24px rgba(0, 242, 171, 0.35);
}

.btn-primary:hover {
    box-shadow: 0 16px 30px rgba(0, 196, 138, 0.4);
}