/* ==========================================================================
   JJ Brindes — TEMA (Turquesa 2)
   Único arquivo a editar para trocar as cores do site.
   1) Tokens do tema (--jj-*)   2) Variáveis do Bootstrap 5.3 apontando para os tokens
   3) Variáveis dos componentes do Bootstrap (botões, cards, modais, dropdown...)
   O <html> usa data-bs-theme="dark", então os padrões escuros do Bootstrap valem
   para o que não estiver sobrescrito aqui.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    /* ---- Superfícies ---- */
    --jj-bg: #071f24;
    --jj-surface: #102b31;
    --jj-surface-2: #163a41;
    --jj-header: #0d3036;
    --jj-topbar: #05171b;
    --jj-nav: #0b2a30;
    --jj-footer: #05171b;
    --jj-input-bg: #0a262b;
    --jj-img-bg: #ffffff;

    /* ---- Linhas e texto ---- */
    --jj-border: #245057;
    --jj-border-strong: #326a72;
    --jj-text: #edf9fa;
    --jj-text-soft: #cfe9eb;
    --jj-muted: #9fc4c6;

    /* ---- Cores de marca ----
       Turquesa leva texto ESCURO (branco sobre #20b8b0 tem contraste 2.5) */
    --jj-primary: #20b8b0;
    --jj-primary-rgb: 32, 184, 176;
    --jj-primary-hover: #2fcac2;
    --jj-primary-contrast: #0b2a2e;
    --jj-primary-text: #55e0d2;
    --jj-primary-soft: rgba(85, 224, 210, .13);
    --jj-cta: #178a52;
    --jj-cta-rgb: 23, 138, 82;
    --jj-cta-hover: #1a9c5d;
    --jj-cta-contrast: #ffffff;
    --jj-destaque: #ffc23d;            /* laranja: títulos pequenos, "orçamento online", avisos */
    --jj-whatsapp: #25d366;
    --jj-danger: #ff8a7e;

    /* ---- Avisos ---- */
    --jj-notice-bg: rgba(23, 138, 82, .2);
    --jj-notice-text: #8fe8bb;

    /* ---- Ícones de categoria (PNG escuro → branco) ---- */
    --jj-icon-bg: rgba(85, 224, 210, .10);
    --jj-icon-filter: brightness(0) invert(1) opacity(.9);

    /* ---- Forma ---- */
    --jj-radius-sm: 11px;
    --jj-radius: 15px;
    --jj-radius-lg: 19px;
    --jj-radius-xl: 26px;
    --jj-shadow: 0 8px 26px rgba(4, 20, 23, .35);
    --jj-shadow-hover: 0 18px 42px rgba(4, 20, 23, .55), 0 0 0 1px rgba(85, 224, 210, .4);
    --jj-shadow-lg: 0 24px 60px rgba(4, 20, 23, .6);
    --jj-focus-ring: rgba(85, 224, 210, .22);

    /* ---- Detalhes de marca ---- */
    --jj-rainbow: linear-gradient(90deg, #8dc63f 0%, #1aa59a 16%, #0b4995 32%, #5b2a86 48%, #c2185b 62%, #e53935 74%, #f39200 86%, #ffcc00 100%);
    --jj-textura:
        linear-gradient(to right, rgba(4, 18, 21, .9), rgba(4, 18, 21, 0) 22%, rgba(4, 18, 21, 0) 78%, rgba(4, 18, 21, .9)),
        linear-gradient(45deg, #0a252a 25%, transparent 25%, transparent 75%, #0a252a 75%, #0a252a),
        linear-gradient(45deg, #0a252a 25%, transparent 25%, transparent 75%, #0a252a 75%, #0a252a),
        linear-gradient(to bottom, #0d3036, #071f24);
    --jj-hero-brilho: radial-gradient(900px 480px at 82% 25%, rgba(32, 184, 176, .26), rgba(0, 0, 0, 0) 60%);

    /* ---- Bootstrap: cores globais ---- */
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.55;
    --bs-body-bg: var(--jj-bg);
    --bs-body-bg-rgb: 7, 31, 36;
    --bs-body-color: var(--jj-text);
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--jj-muted);
    --bs-secondary-bg: var(--jj-surface-2);
    --bs-tertiary-bg: var(--jj-surface);
    --bs-border-color: var(--jj-border);
    --bs-border-color-translucent: var(--jj-border);
    --bs-border-radius: var(--jj-radius-sm);
    --bs-border-radius-lg: var(--jj-radius);
    --bs-border-radius-xl: var(--jj-radius-lg);
    --bs-border-radius-xxl: var(--jj-radius-xl);
    --bs-primary: var(--jj-primary);
    --bs-primary-rgb: var(--jj-primary-rgb);
    --bs-primary-text-emphasis: var(--jj-primary-text);
    --bs-primary-bg-subtle: var(--jj-primary-soft);
    --bs-primary-border-subtle: rgba(85, 224, 210, .35);
    --bs-success: var(--jj-cta);
    --bs-success-rgb: var(--jj-cta-rgb);
    --bs-success-text-emphasis: var(--jj-notice-text);
    --bs-success-bg-subtle: var(--jj-notice-bg);
    --bs-danger: var(--jj-danger);
    --bs-link-color: var(--jj-primary-text);
    --bs-link-color-rgb: 85, 224, 210;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-focus-ring-color: var(--jj-focus-ring);
    --bs-form-invalid-color: var(--jj-danger);
    --bs-form-invalid-border-color: var(--jj-danger);
}

/* ---- Bootstrap: componentes ---- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.3rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-border-radius: var(--jj-radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--jj-focus-ring);
}
.btn-sm { --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .45rem; }
.btn-primary {
    --bs-btn-bg: var(--jj-primary);
    --bs-btn-border-color: var(--jj-primary);
    --bs-btn-color: var(--jj-primary-contrast);
    --bs-btn-hover-bg: var(--jj-primary-hover);
    --bs-btn-hover-border-color: var(--jj-primary-hover);
    --bs-btn-hover-color: var(--jj-primary-contrast);
    --bs-btn-active-bg: var(--jj-primary-hover);
    --bs-btn-active-border-color: var(--jj-primary-hover);
    --bs-btn-active-color: var(--jj-primary-contrast);
    --bs-btn-disabled-bg: var(--jj-primary);
    --bs-btn-disabled-border-color: var(--jj-primary);
    --bs-btn-disabled-color: var(--jj-primary-contrast);
}
.btn-success {
    --bs-btn-bg: var(--jj-cta);
    --bs-btn-border-color: var(--jj-cta);
    --bs-btn-color: var(--jj-cta-contrast);
    --bs-btn-hover-bg: var(--jj-cta-hover);
    --bs-btn-hover-border-color: var(--jj-cta-hover);
    --bs-btn-hover-color: var(--jj-cta-contrast);
    --bs-btn-active-bg: var(--jj-cta-hover);
    --bs-btn-active-border-color: var(--jj-cta-hover);
    --bs-btn-disabled-bg: var(--jj-cta);
    --bs-btn-disabled-border-color: var(--jj-cta);
    box-shadow: 0 8px 24px rgba(8, 40, 30, .35);
}
.btn-outline-primary {
    --bs-btn-color: var(--jj-primary-text);
    --bs-btn-border-color: rgba(85, 224, 210, .45);
    --bs-btn-hover-bg: var(--jj-cta);
    --bs-btn-hover-border-color: var(--jj-cta);
    --bs-btn-hover-color: var(--jj-cta-contrast);
    --bs-btn-active-bg: var(--jj-cta);
    --bs-btn-active-border-color: var(--jj-cta);
}
.btn-outline-secondary {
    --bs-btn-color: var(--jj-text);
    --bs-btn-border-color: var(--jj-border-strong);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--jj-primary);
    --bs-btn-hover-color: var(--jj-primary-text);
    --bs-btn-active-bg: var(--jj-primary);
    --bs-btn-active-border-color: var(--jj-primary);
    --bs-btn-active-color: var(--jj-primary-contrast);
}
.card {
    --bs-card-bg: var(--jj-surface);
    --bs-card-border-color: var(--jj-border);
    --bs-card-border-radius: var(--jj-radius);
    --bs-card-inner-border-radius: calc(var(--jj-radius) - 1px);
    --bs-card-cap-bg: transparent;
}
.modal {
    --bs-modal-bg: var(--jj-surface);
    --bs-modal-border-color: var(--jj-border);
    --bs-modal-border-radius: var(--jj-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--jj-radius-lg) - 1px);
    --bs-modal-header-border-color: var(--jj-border);
    --bs-modal-footer-border-color: var(--jj-border);
}
.modal-backdrop { --bs-backdrop-bg: #02090b; --bs-backdrop-opacity: .7; }
.dropdown-menu {
    --bs-dropdown-bg: var(--jj-surface);
    --bs-dropdown-border-color: var(--jj-border);
    --bs-dropdown-border-radius: var(--jj-radius);
    --bs-dropdown-link-color: var(--jj-text);
    --bs-dropdown-link-hover-color: var(--jj-primary-text);
    --bs-dropdown-link-hover-bg: var(--jj-primary-soft);
    --bs-dropdown-link-active-color: var(--jj-primary-contrast);
    --bs-dropdown-link-active-bg: var(--jj-primary);
    --bs-dropdown-header-color: var(--jj-muted);
    --bs-dropdown-box-shadow: var(--jj-shadow-lg);
}
.offcanvas { --bs-offcanvas-bg: var(--jj-surface); --bs-offcanvas-color: var(--jj-text); --bs-offcanvas-border-color: var(--jj-border); }
.breadcrumb {
    --bs-breadcrumb-font-size: .8rem;
    --bs-breadcrumb-divider-color: var(--jj-muted);
    --bs-breadcrumb-item-active-color: var(--jj-muted);
}
.form-control,
.form-select {
    background-color: var(--jj-input-bg);
    border-color: rgba(160, 235, 228, .2);
    color: var(--jj-text);
}
.form-control::placeholder { color: var(--jj-muted); opacity: .8; }
.form-control:focus,
.form-select:focus {
    background-color: var(--jj-input-bg);
    border-color: var(--jj-primary);
    color: var(--jj-text);
    box-shadow: 0 0 0 .25rem var(--jj-focus-ring);
}
.form-control:disabled,
.form-control[readonly] { background-color: var(--jj-surface-2); }