/*
 * Tema LojaTec — cores extraídas diretamente do logotipo.
 *   teal  #448DA2  etiqueta + "Loja"
 *   verde #A2C86A  carrinho + "Tec"
 *   tinta #192428  slogan
 */

:root {
    /* Marca */
    --lt-teal: #448DA2;
    --lt-teal-dark: #2F6B7D;
    --lt-teal-darker: #23505E;
    --lt-teal-light: #7FB3C2;
    --lt-teal-wash: #E5F3F7;

    --lt-green: #A2C86A;
    --lt-green-dark: #82A94B;
    --lt-green-darker: #63863A;
    --lt-green-light: #C3DE9B;
    --lt-green-wash: #F1F7E4;

    --lt-ink: #192428;
    --lt-ink-soft: #55666C;
    --lt-line: #DCE6EA;

    /* Bootstrap: mapear a marca para os tokens do framework */
    --bs-primary: var(--lt-teal);
    --bs-primary-rgb: 68, 141, 162;
    --bs-secondary: var(--lt-green);
    --bs-secondary-rgb: 162, 200, 106;

    --bs-body-color: var(--lt-ink);
    --bs-body-color-rgb: 25, 36, 40;
    --bs-emphasis-color: var(--lt-ink);
    --bs-secondary-color: var(--lt-ink-soft);
    --bs-border-color: var(--lt-line);

    --bs-link-color: var(--lt-teal-dark);
    --bs-link-color-rgb: 47, 107, 125;
    --bs-link-hover-color: var(--lt-teal-darker);

    --bs-heading-color: var(--lt-ink);
    --bs-focus-ring-color: rgba(68, 141, 162, .35);

    /* O slider de produtos TecnoTip herdou este token de outro projeto.
       Aponta-se para o verde da marca em vez de editar o partial. */
    --ak-yellow: var(--lt-green);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #10191C;
    --bs-body-color: #E3ECEF;
    --bs-body-color-rgb: 227, 236, 239;
    --bs-emphasis-color: #FFF;
    --bs-secondary-color: #9FB2B9;
    --bs-border-color: #2A3A40;
    --bs-heading-color: #FFF;

    /* Em fundo escuro o teal precisa de subir para manter contraste legível. */
    --bs-primary: var(--lt-teal-light);
    --bs-primary-rgb: 127, 179, 194;
    --bs-link-color: var(--lt-teal-light);
    --bs-link-color-rgb: 127, 179, 194;
    --bs-link-hover-color: #A9CFDA;

    --lt-line: #2A3A40;
}

/* --- Botões da marca ------------------------------------------------- */
/* O Bootstrap do CDN compila as cores dos botões — os tokens acima não os
   alcançam, por isso os estados são redefinidos explicitamente. */

.btn-primary {
    --bs-btn-bg: var(--lt-teal);
    --bs-btn-border-color: var(--lt-teal);
    --bs-btn-color: #FFF;
    --bs-btn-hover-bg: var(--lt-teal-dark);
    --bs-btn-hover-border-color: var(--lt-teal-dark);
    --bs-btn-hover-color: #FFF;
    --bs-btn-active-bg: var(--lt-teal-darker);
    --bs-btn-active-border-color: var(--lt-teal-darker);
    --bs-btn-active-color: #FFF;
    --bs-btn-disabled-bg: var(--lt-teal-light);
    --bs-btn-disabled-border-color: var(--lt-teal-light);
    --bs-btn-disabled-color: #FFF;
}

/* CTA principal. Sobre o verde da marca o texto é escuro: branco sobre #A2C86A
   fica em ~1.9:1 e falha o contraste mínimo. */
.btn-cta {
    --bs-btn-bg: var(--lt-green);
    --bs-btn-border-color: var(--lt-green);
    --bs-btn-color: var(--lt-ink);
    --bs-btn-hover-bg: var(--lt-green-dark);
    --bs-btn-hover-border-color: var(--lt-green-dark);
    --bs-btn-hover-color: var(--lt-ink);
    --bs-btn-active-bg: var(--lt-green-darker);
    --bs-btn-active-border-color: var(--lt-green-darker);
    --bs-btn-active-color: #FFF;
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: var(--lt-teal-dark);
    --bs-btn-border-color: var(--lt-teal);
    --bs-btn-hover-bg: var(--lt-teal);
    --bs-btn-hover-border-color: var(--lt-teal);
    --bs-btn-hover-color: #FFF;
    --bs-btn-active-bg: var(--lt-teal-dark);
    --bs-btn-active-border-color: var(--lt-teal-dark);
}

/* --- Utilitários de marca -------------------------------------------- */

.text-brand { color: var(--lt-teal) !important; }
.text-brand-green { color: var(--lt-green-darker) !important; } /* legível sobre branco */
.bg-brand { background-color: var(--lt-teal) !important; }
.bg-brand-wash { background-color: var(--lt-teal-wash) !important; }
.bg-green-wash { background-color: var(--lt-green-wash) !important; }

/* Gradiente teal→verde do logotipo, para o hero. */
.bg-brand-gradient {
    background: linear-gradient(135deg, var(--lt-teal-darker) 0%, var(--lt-teal) 55%, var(--lt-green) 100%);
    color: #FFF;
}

.logo-navbar { height: 40px; width: auto; }
.logo-hero { height: 120px; width: auto; }

/* --- Acessibilidade --------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--lt-teal);
    outline-offset: 2px;
}

/* O parallax e as animações da landing page respeitam quem pede menos movimento. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}