/* ═══════════════════════════════════════════════════════════════════
   DealOrNope — tema do mercado US
   Redefine os tokens do design system (acs-design-system.css); nenhum
   componente é reescrito aqui além do que a marca exige.

   Paleta (contraste WCAG conferido):
     Ink Navy     #172033  texto, estrutura, confiança
     Sunset Ember #FF7A2E  ação principal, com texto navy (6,3:1)
     Marigold     #FFC53D  destaque "steal", selos
     Deal Green   #0B7D47  veredito Deal (5,3:1 com branco)
     Nope Rose    #D63B47  veredito Nope (4,6:1 com branco)
     Trust Blue   #1F5FD6  links e informação
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-latin.ad33cbc6d232.woff2") format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/figtree-latin.202cfb54d4e6.woff2") format('woff2');
}

:root {
    --dn-ink: #172033;
    --dn-ember: #FF7A2E;
    --dn-ember-deep: #B93E0A;
    --dn-marigold: #FFC53D;
    --dn-deal: #0B7D47;
    --dn-nope: #D63B47;
    --dn-trust: #1F5FD6;
    --dn-cream: #FFF7EC;

    --acs-font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --acs-font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;

    /* "Marca" vira o navy: botões primários, selos e foco */
    --acs-brand-50:  #f1f3f8;
    --acs-brand-100: #e2e6f0;
    --acs-brand-200: #c5cde0;
    --acs-brand-300: #98a5c2;
    --acs-brand-400: #5d6c8f;
    --acs-brand-500: #172033;
    --acs-brand-600: #111829;
    --acs-brand-700: #0c111e;
    --acs-brand-800: #080c15;
    --acs-brand-900: #04060b;

    /* "Ouro" vira o marigold */
    --acs-gold-100: #fff3d1;
    --acs-gold-300: #ffd977;
    --acs-gold:     #FFC53D;
    --acs-gold-700: #9a6a00;

    --acs-deal:       #0B7D47;
    --acs-deal-soft:  #dcf3e7;
    --acs-alert:      #D63B47;
    --acs-alert-soft: #fbe3e5;
    --acs-info:       #1F5FD6;
    --acs-info-soft:  #e3ecfc;

    --acs-bg:            #ffffff;
    --acs-surface:       #ffffff;
    --acs-surface-2:     #fffbf5;
    --acs-surface-3:     #fff4e4;
    --acs-surface-inset: #fff7ec;
    --acs-overlay:       rgba(23, 32, 51, .58);

    --acs-text:        #172033;
    --acs-text-muted:  #5A6478;
    --acs-text-subtle: #8a93a6;
    --acs-border:        #f0e4d3;
    --acs-border-strong: #e2cfb4;

    --acs-gradient-brand: linear-gradient(135deg, #172033 0%, #24345a 100%);
    --acs-gradient-gold:  linear-gradient(135deg, #FFC53D 0%, #ffd977 100%);
    --acs-gradient-deal:  linear-gradient(135deg, #0B7D47 0%, #08653a 100%);
    --acs-gradient-hero:  radial-gradient(900px 520px at 8% -10%, rgba(255,122,46,.28), transparent 62%),
                          radial-gradient(800px 480px at 95% 0%, rgba(255,197,61,.22), transparent 60%),
                          linear-gradient(160deg, #fff7ec 0%, #fffdf9 100%);

    --acs-shadow-xs: 0 1px 2px rgba(23, 32, 51, .06);
    --acs-shadow-sm: 0 2px 8px rgba(23, 32, 51, .07), 0 1px 2px rgba(23, 32, 51, .05);
    --acs-shadow:    0 6px 24px rgba(23, 32, 51, .09), 0 2px 6px rgba(23, 32, 51, .05);
    --acs-shadow-lg: 0 18px 48px rgba(23, 32, 51, .14), 0 6px 16px rgba(23, 32, 51, .07);
    --acs-shadow-brand: 0 12px 32px rgba(23, 32, 51, .24);
    --acs-shadow-deal:  0 12px 32px rgba(255, 122, 46, .30);
    --acs-shadow-gold:  0 12px 32px rgba(255, 197, 61, .32);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dn-ember-deep: #FF9A62;
        --acs-bg:            #12161F;
        --acs-surface:       #191E29;
        --acs-surface-2:     #1f2533;
        --acs-surface-3:     #283041;
        --acs-surface-inset: #151a24;
        --acs-overlay:       rgba(10, 13, 20, .76);
        --acs-text:        #EEF1F7;
        --acs-text-muted:  #A3ABBB;
        --acs-text-subtle: #7b8496;
        --acs-border:        #2a3242;
        --acs-border-strong: #3a4458;
        --acs-brand-50:  rgba(126, 168, 255, .14);
        --acs-brand-100: rgba(126, 168, 255, .22);
        --acs-brand-400: #9fbcff;
        --acs-brand-500: #7EA8FF;
        --acs-brand-600: #6b97f5;
        --acs-deal:       #3CCB7F;
        --acs-deal-soft:  rgba(60, 203, 127, .16);
        --acs-alert:      #FF6B75;
        --acs-alert-soft: rgba(255, 107, 117, .16);
        --acs-info:       #7EA8FF;
        --acs-info-soft:  rgba(126, 168, 255, .16);
        --acs-gradient-brand: linear-gradient(135deg, #2b3a5e 0%, #3a4e7c 100%);
        --acs-gradient-hero:  radial-gradient(900px 520px at 8% -10%, rgba(255,138,76,.22), transparent 62%),
                              linear-gradient(160deg, #161b26 0%, #12161F 100%);
        --acs-gradient-glass: linear-gradient(140deg, rgba(40,48,65,.74), rgba(25,30,41,.52));
        --acs-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --acs-shadow-sm: 0 2px 10px rgba(0, 0, 0, .38);
        --acs-shadow:    0 8px 28px rgba(0, 0, 0, .45);
        --acs-shadow-lg: 0 22px 56px rgba(0, 0, 0, .55);
    }
}
:root[data-theme="dark"] {
    --dn-ember-deep: #FF9A62;
    --acs-bg:            #12161F;
    --acs-surface:       #191E29;
    --acs-surface-2:     #1f2533;
    --acs-surface-3:     #283041;
    --acs-surface-inset: #151a24;
    --acs-overlay:       rgba(10, 13, 20, .76);
    --acs-text:        #EEF1F7;
    --acs-text-muted:  #A3ABBB;
    --acs-text-subtle: #7b8496;
    --acs-border:        #2a3242;
    --acs-border-strong: #3a4458;
    --acs-brand-50:  rgba(126, 168, 255, .14);
    --acs-brand-100: rgba(126, 168, 255, .22);
    --acs-brand-400: #9fbcff;
    --acs-brand-500: #7EA8FF;
    --acs-brand-600: #6b97f5;
    --acs-deal:       #3CCB7F;
    --acs-deal-soft:  rgba(60, 203, 127, .16);
    --acs-alert:      #FF6B75;
    --acs-alert-soft: rgba(255, 107, 117, .16);
    --acs-info:       #7EA8FF;
    --acs-info-soft:  rgba(126, 168, 255, .16);
    --acs-gradient-brand: linear-gradient(135deg, #2b3a5e 0%, #3a4e7c 100%);
    --acs-gradient-hero:  radial-gradient(900px 520px at 8% -10%, rgba(255,138,76,.22), transparent 62%),
                          linear-gradient(160deg, #161b26 0%, #12161F 100%);
    --acs-gradient-glass: linear-gradient(140deg, rgba(40,48,65,.74), rgba(25,30,41,.52));
    --acs-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --acs-shadow-sm: 0 2px 10px rgba(0, 0, 0, .38);
    --acs-shadow:    0 8px 28px rgba(0, 0, 0, .45);
    --acs-shadow-lg: 0 22px 56px rgba(0, 0, 0, .55);
}

/* ── Tipografia: Bricolage nos títulos e nos números grandes ───────── */
h1, h2, h3, .acs-price, .acs-verdict__stamp, .dn-wordmark {
    font-family: var(--acs-font-display);
    letter-spacing: -0.01em;
}

/* ── Preço americano: "$279.99", sem o respiro do "R$ 279,99" ──────── */
.acs-price { gap: 0; }
.acs-price__symbol { margin-right: 1px; }

/* ── Ação de compra: ember com texto navy (o "vá para a loja") ─────── */
.acs-btn--deal {
    --_bg: var(--dn-ember);
    --_fg: var(--dn-ink);
    box-shadow: var(--acs-shadow-deal);
}
.acs-btn--deal:hover { filter: brightness(1.05); }

/* ── Logotipo em texto ─────────────────────────────────────────────── */
.dn-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.dn-wordmark__deal { color: var(--acs-deal); }
.dn-wordmark__or   { color: var(--acs-text-muted); font-weight: 600; font-size: .8em; margin: 0 .06em; }
.dn-wordmark__nope { color: var(--acs-alert); }
.dn-wordmark:focus-visible { outline: 3px solid var(--acs-info); outline-offset: 4px; border-radius: 6px; }
.acs-footer .dn-wordmark { font-size: 1.4rem; margin-bottom: 14px; }

/* ── Aviso de comissão (FTC) perto dos links de loja ──────────────── */
.dn-disclosure {
    font-size: var(--acs-text-xs);
    color: var(--acs-text-muted);
}
.dn-disclosure a { color: inherit; text-decoration: underline; }