/* =========================================================
   DESCONTAÍ — DESIGN SYSTEM
   ========================================================= */

:root {
    /* ─────────────────────────────────────────────────────
       MARCA
       ───────────────────────────────────────────────────── */
    --brand-primary:       #c6b166;
    --brand-primary-hover: #a98f3f;
    --brand-primary-dark:  #8f741f;
    --brand-primary-light: #fcf8e9;

    /* Compatibilidade com CSS antigo */
    --brand-pink:       var(--brand-primary);
    --brand-pink-dark:  var(--brand-primary-dark);
    --brand-pink-light: var(--brand-primary-light);


    /* ─────────────────────────────────────────────────────
       NEUTROS
       ───────────────────────────────────────────────────── */
    --ink:      #181818;

    --gray-900: #202020;
    --gray-800: #303030;
    --gray-700: #4d4d4d;
    --gray-600: #666666;
    --gray-500: #808080;
    --gray-400: #a3a3a3;
    --gray-300: #d7d7d7;
    --gray-200: #e7e7e7;
    --gray-100: #f5f5f5;
    --gray-50:  #fafafa;

    --white: #ffffff;


    /* ─────────────────────────────────────────────────────
       SEMÂNTICOS
       ───────────────────────────────────────────────────── */
    --sale-red:      #e5251b;
    --success-green: #15803d;
    --warning:       #ca8a04;
    --star-yellow:   #ffc107;
    --error:         #c0392b;

    --success-bg: #ecfdf3;
    --warning-bg: #fefce8;
    --error-bg:   #fef2f2;


    /* ─────────────────────────────────────────────────────
       SUPERFÍCIES
       ───────────────────────────────────────────────────── */
    --background:        #ffffff;
    --surface:           #ffffff;
    --surface-secondary: #f7f7f7;
    --surface-hover:     #f3f3f3;

    --text-primary:   var(--ink);
    --text-secondary: var(--gray-700);
    --text-muted:     var(--gray-500);

    --border:        var(--gray-300);
    --border-subtle: var(--gray-200);


    /* ─────────────────────────────────────────────────────
       RAIOS
       ───────────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   22px;
    --radius-pill: 999px;


    /* ─────────────────────────────────────────────────────
       SOMBRAS
       ───────────────────────────────────────────────────── */
    --shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.04);

    --shadow-soft:
        0 2px 8px rgba(0, 0, 0, 0.07);

    --shadow-card:
        0 4px 16px rgba(0, 0, 0, 0.07);

    --shadow-lift:
        0 12px 32px rgba(0, 0, 0, 0.12);


    /* ─────────────────────────────────────────────────────
       TRANSIÇÕES
       ───────────────────────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition:      0.22s ease;
    --transition-slow: 0.35s ease;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);


    /* ─────────────────────────────────────────────────────
       ALIASES LEGADOS
       Mantidos para não quebrar páginas existentes
       ───────────────────────────────────────────────────── */
    --accent:       var(--brand-primary);
    --accent-hover: var(--brand-primary-hover);
    --accent-light: var(--brand-primary-light);

    --black:      var(--ink);
    --black-soft: #262626;

    --cream:      var(--gray-100);
    --cream-dark: #ececec;

    --gray-mid:   var(--gray-700);
    --gray-muted: var(--gray-500);

    --border-dark: var(--gray-300);


    /* ─────────────────────────────────────────────────────
       PALETA ESCURA — fonte única da verdade
       Usada tanto por prefers-color-scheme quanto por html.dark,
       evitando divergência entre os dois blocos.
       ───────────────────────────────────────────────────── */
    --dark-background:        #09090b;
    --dark-surface:           #18181b;
    --dark-surface-secondary: #202024;
    --dark-surface-hover:     #27272a;

    --dark-text-primary:   #f4f4f5;
    --dark-text-secondary: #d4d4d8;
    --dark-text-muted:     #a1a1aa;

    --dark-border:        #3f3f46;
    --dark-border-subtle: #27272a;

    --dark-gray-100: #27272a;
    --dark-gray-200: #3f3f46;
    --dark-gray-300: #52525b;
    --dark-gray-500: #a1a1aa;
    --dark-gray-700: #d4d4d8;

    --dark-cream:      #18181b;
    --dark-cream-dark: #27272a;

    --dark-black:      #fafafa;
    --dark-black-soft: #e4e4e7;

    --dark-border-dark: #3f3f46;

    --dark-brand-primary-light: #272313;

    --dark-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.28);
    --dark-shadow-card: 0 8px 26px rgba(0, 0, 0, 0.32);
    --dark-shadow-lift: 0 15px 40px rgba(0, 0, 0, 0.4);

    /* informa ao navegador que o site suporta tema claro por padrão
       (controles nativos de formulário, scrollbars, etc.) */
    color-scheme: light;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--background);
    color: var(--text-primary);

    font-family:
        "DM Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;

    /* tipografia mais nítida em telas retina/subpixel */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    transition:
        background-color var(--transition),
        color var(--transition);
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   SELEÇÃO DE TEXTO
   ========================================================= */

::selection {
    background: var(--brand-primary);
    color: var(--ink);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}


/* =========================================================
   FOCO / ACESSIBILIDADE
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    /* alfa levemente maior que o original (0.35 → 0.45) para
       melhorar o contraste do anel de foco em fundos claros */
    outline: 3px solid rgba(198, 177, 102, 0.45);
    outline-offset: 3px;

    border-radius: var(--radius-sm);
}

/* navegadores sem suporte a :focus-visible (fallback) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}


/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {
    color: var(--text-primary);
    background: var(--surface);

    border: 1px solid var(--border);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition),
        color var(--transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--gray-400);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;

    border-color: var(--brand-primary);

    box-shadow:
        0 0 0 3px rgba(198, 177, 102, 0.14);
}

input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--surface-secondary);
}


/* =========================================================
   BOTÕES GERAIS
   ========================================================= */

button {
    cursor: pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition-fast),
        box-shadow var(--transition);
}

button:active:not(:disabled) {
    transform: scale(0.98);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter {
    position: relative;

    margin-top: 4rem;

    padding:
        clamp(3rem, 7vw, 5rem)
        clamp(1rem, 4vw, 2rem);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--brand-primary-light),
            #ffffff
        );

    border-top: 1px solid rgba(198, 177, 102, 0.25);

    transition:
        background-color var(--transition),
        border-color var(--transition);
}


/* detalhe decorativo */

.newsletter::before {
    content: "";

    position: absolute;
    width: 320px;
    height: 320px;

    top: -190px;
    right: -100px;

    border-radius: 50%;

    background: rgba(198, 177, 102, 0.14);

    pointer-events: none;
}

.newsletter::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -150px;
    left: -80px;

    border-radius: 50%;

    background: rgba(198, 177, 102, 0.08);

    pointer-events: none;
}


/* conteúdo */

.newsletter-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 680px;

    margin: 0 auto;

    text-align: center;
}


/* título */

.newsletter-title {
    margin: 0 0 0.65rem;

    font-family:
        "Poppins",
        "DM Sans",
        sans-serif;

    font-size: clamp(1.55rem, 4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;

    color: var(--text-primary);
}


/* descrição */

.newsletter-sub {
    max-width: 520px;

    margin:
        0 auto
        clamp(1.5rem, 4vw, 2rem);

    color: var(--text-secondary);

    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.65;
}


/* formulário */

.newsletter-form {
    display: flex;
    align-items: stretch;

    width: 100%;
    max-width: 600px;

    margin: 0 auto;

    gap: 0.65rem;
}


/* input */

.newsletter-form input {
    flex: 1;
    min-width: 0;

    min-height: 50px;

    padding: 0 1.35rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-pill);

    background: var(--surface);

    color: var(--text-primary);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.95rem;

    box-shadow: var(--shadow-xs);
}

.newsletter-form input::placeholder {
    color: #6b6b6b;
}

html.dark .newsletter-form input::placeholder {
    color: var(--text-muted);
}

.newsletter-form input:hover {
    border-color: rgba(198, 177, 102, 0.75);
}

.newsletter-form input:focus {
    border-color: var(--brand-primary);

    box-shadow:
        0 0 0 4px rgba(198, 177, 102, 0.15),
        var(--shadow-soft);
}


/* botão */

.newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 1.65rem;

    border: 1px solid var(--brand-primary);

    border-radius: var(--radius-pill);

    background: var(--brand-primary);

    /* antes era um hex fixo (#181818); agora usa o token,
       então acompanha automaticamente qualquer ajuste de marca */
    color: var(--ink);

    font-weight: 700;
    font-size: 0.9rem;

    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(198, 177, 102, 0.25);
}

.newsletter-form button:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);

    color: var(--ink);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(169, 143, 63, 0.28);
}

.newsletter-form button:active {
    transform: translateY(0) scale(0.98);
}


/* =========================================================
   MENSAGEM NEWSLETTER
   Exemplo:
   <p class="newsletter-message success">...</p>
   ========================================================= */

.newsletter-message {
    margin: 1rem 0 0;

    font-size: 0.88rem;
    font-weight: 600;
}

.newsletter-message.success {
    color: var(--success-green);
}

.newsletter-message.error {
    color: var(--error);
}

html.dark .newsletter-message.success {
    color: #4ade80;
}

html.dark .newsletter-message.error {
    color: #f87171;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .newsletter {
        margin-top: 3rem;

        padding:
            3rem
            1rem;
    }

    .newsletter-form {
        flex-direction: column;

        gap: 0.75rem;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    .newsletter-form input {
        min-height: 52px;
    }

    .newsletter-form button {
        min-height: 52px;
    }
}


/* =========================================================
   TEMA ESCURO AUTOMÁTICO
   ========================================================= */

@media (prefers-color-scheme: dark) {

    :root {
        color-scheme: dark;

        --background:        var(--dark-background);
        --surface:           var(--dark-surface);
        --surface-secondary: var(--dark-surface-secondary);
        --surface-hover:     var(--dark-surface-hover);

        --text-primary:   var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-muted:     var(--dark-text-muted);

        --border:        var(--dark-border);
        --border-subtle: var(--dark-border-subtle);

        --gray-100: var(--dark-gray-100);
        --gray-200: var(--dark-gray-200);
        --gray-300: var(--dark-gray-300);
        --gray-500: var(--dark-gray-500);
        --gray-700: var(--dark-gray-700);

        --cream:      var(--dark-cream);
        --cream-dark: var(--dark-cream-dark);

        --black:      var(--dark-black);
        --black-soft: var(--dark-black-soft);

        --border-dark: var(--dark-border-dark);

        --brand-primary-light: var(--dark-brand-primary-light);

        --shadow-soft: var(--dark-shadow-soft);
        --shadow-card: var(--dark-shadow-card);
        --shadow-lift: var(--dark-shadow-lift);
    }


    .newsletter {
        background:
            linear-gradient(
                135deg,
                #171711,
                #111113
            );

        border-top-color:
            rgba(198, 177, 102, 0.16);
    }


    .newsletter::before {
        background:
            rgba(198, 177, 102, 0.08);
    }

    .newsletter::after {
        background:
            rgba(198, 177, 102, 0.05);
    }


    .newsletter-form input {
        background: var(--dark-surface);

        border-color: var(--dark-border);

        color: var(--dark-black);
    }

    .newsletter-form input:hover {
        border-color:
            rgba(198, 177, 102, 0.65);
    }

    .newsletter-form input:focus {
        border-color: var(--brand-primary);

        box-shadow:
            0 0 0 4px rgba(198, 177, 102, 0.12);
    }

    /* scrollbar coerente com o tema no Firefox */
    * {
        scrollbar-color: var(--dark-gray-300) var(--dark-surface);
    }
}


/* =========================================================
   COMPATIBILIDADE COM O "dark" DO TAILWIND
   ========================================================= */

html.dark {
    color-scheme: dark;

    --background:        var(--dark-background);
    --surface:           var(--dark-surface);
    --surface-secondary: var(--dark-surface-secondary);
    --surface-hover:     var(--dark-surface-hover);

    --text-primary:   var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted:     var(--dark-text-muted);

    --border:        var(--dark-border);
    --border-subtle: var(--dark-border-subtle);

    --gray-100: var(--dark-gray-100);
    --gray-200: var(--dark-gray-200);
    --gray-300: var(--dark-gray-300);
    --gray-500: var(--dark-gray-500);
    --gray-700: var(--dark-gray-700);

    --cream:      var(--dark-cream);
    --cream-dark: var(--dark-cream-dark);

    --black:      var(--dark-black);
    --black-soft: var(--dark-black-soft);

    --border-dark: var(--dark-border-dark);

    scrollbar-color: var(--dark-gray-300) var(--dark-surface);
}

/* garante que o tema claro forçado (ex.: <html class="light">)
   sempre vença a preferência do sistema operacional */
html.light {
    color-scheme: light;

    --background:        #ffffff;
    --surface:           #ffffff;
    --surface-secondary: #f7f7f7;
    --surface-hover:     #f3f3f3;

    --text-primary:   var(--ink);
    --text-secondary: var(--gray-700);
    --text-muted:     var(--gray-500);

    --border:        var(--gray-300);
    --border-subtle: var(--gray-200);
}


/* =========================================================
   USUÁRIO COM REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   USUÁRIO COM PREFERÊNCIA DE ALTO CONTRASTE
   ========================================================= */

@media (prefers-contrast: more) {

    :root {
        --border:        var(--gray-500);
        --border-subtle: var(--gray-400);
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 3px solid var(--brand-primary-dark);
    }
}

/* =========================================================
   BOTÃO DE PREFERÊNCIA DE TEMA (claro/escuro)
   ========================================================= */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;

    margin-left: 0.5rem;

    border: 1px solid var(--gray-300);
    border-radius: 9999px;

    color: var(--brand-primary);
    background: transparent;

    cursor: pointer;

    transition: background-color 0.15s ease;
}

.theme-toggle:hover {
    background: rgba(198, 177, 102, 0.12);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* exibe o ícone coerente com o tema ativo */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }

html.dark .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun  { display: block; }


/* =========================================================
   SELETOR DE MARCA (reutilizável: /ofertas e /marca/<slug>)
   ========================================================= */

.brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    flex: 1 1 140px;
    max-width: 200px;

    padding: 0.75rem 0.5rem;

    border: 1px solid var(--border);
    border-radius: 0.75rem;

    background: var(--surface);
    color: var(--text-primary);

    text-align: center;
    text-decoration: none;

    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.brand-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.brand-card img {
    display: block;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
}

.brand-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    width: 100%;

    min-height: 2.4em;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.brand-card.is-active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary);
}

.brand-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
}