/* ════════════════════════════════════════════════════════════════
   Agência Tráfego Pago — Design Tokens v1 (Sprint 3, 2026-04-28)
   ──────────────────────────────────────────────────────────────────
   Mantém a identidade roxa+dourada, mas evolui para uma estética
   pronta para enterprise/mid-market: tokens consistentes de cor,
   espaçamento, sombra, raio, motion e tipografia.

   Use sempre via var(--token-name). Não hard-code valores.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ═══ Cores — paleta roxa em escala ═══ */
    --atp-purple-50:  #f5f0fa;
    --atp-purple-100: #e6d8f0;
    --atp-purple-200: #c8a8db;
    --atp-purple-300: #a878c5;
    --atp-purple-400: #8048a3;
    --atp-purple-500: #6d3a9a;  /* secondary lighter */
    --atp-purple-600: #400c6d;  /* PRIMARY brand */
    --atp-purple-700: #2a0a4d;  /* CTAs, focus deep */
    --atp-purple-800: #1c0633;
    --atp-purple-900: #0e031a;

    /* ═══ Cores — dourado refinado ═══ */
    --atp-gold-100: #fdf6e3;
    --atp-gold-200: #f5e2a0;
    --atp-gold-300: #ecc960;
    --atp-gold-400: #d4a52a;
    --atp-gold-500: #d4922f;  /* accent atualizado (mais sóbrio que #e0a91e) */
    --atp-gold-600: #a87024;
    --atp-gold-700: #7c5118;

    /* ═══ Neutros profissionais ═══ */
    --atp-white:    #ffffff;
    --atp-gray-50:  #fafafb;  /* backgrounds suaves */
    --atp-gray-100: #f4f5f7;
    --atp-gray-200: #e9ecf1;
    --atp-gray-300: #d4d8e0;
    --atp-gray-400: #a0a4ad;
    --atp-gray-500: #74787f;  /* text secundário */
    --atp-gray-600: #545861;
    --atp-gray-700: #3d3f44;  /* text primário */
    --atp-gray-800: #232427;
    --atp-gray-900: #131313;
    --atp-black:    #000000;

    /* ═══ Cores semânticas (state) ═══ */
    --atp-success: #10b981;
    --atp-info:    #0ea5e9;
    --atp-warning: #f59e0b;
    --atp-danger:  #ef4444;

    /* ═══ Aliases brand ═══ */
    --atp-brand:           var(--atp-purple-600);
    --atp-brand-dark:      var(--atp-purple-700);
    --atp-brand-light:     var(--atp-purple-500);
    --atp-brand-soft:      var(--atp-purple-50);
    --atp-accent:          var(--atp-gold-500);
    --atp-accent-dark:     var(--atp-gold-600);
    --atp-text:            var(--atp-gray-700);
    --atp-text-muted:      var(--atp-gray-500);
    --atp-text-inverse:    var(--atp-white);
    --atp-border:          var(--atp-gray-200);
    --atp-bg:              var(--atp-white);
    --atp-bg-soft:         var(--atp-gray-50);

    /* ═══ Tipografia ═══ */
    --atp-font-heading: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --atp-font-body:    'Kumbh Sans', system-ui, -apple-system, sans-serif;
    --atp-font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

    /* Escala (mobile-first, ajuste para desktop via @media) */
    --atp-text-xs:   0.75rem;   /* 12px */
    --atp-text-sm:   0.875rem;  /* 14px */
    --atp-text-base: 1rem;      /* 16px */
    --atp-text-lg:   1.125rem;  /* 18px */
    --atp-text-xl:   1.25rem;   /* 20px */
    --atp-text-2xl:  1.5rem;    /* 24px */
    --atp-text-3xl:  1.875rem;  /* 30px */
    --atp-text-4xl:  2.25rem;   /* 36px */
    --atp-text-5xl:  3rem;      /* 48px */
    --atp-text-6xl:  3.75rem;   /* 60px — usar em H1 hero */
    --atp-text-7xl:  4rem;      /* 64px — desktop hero */

    --atp-leading-tight:   1.2;
    --atp-leading-snug:    1.4;
    --atp-leading-normal:  1.6;
    --atp-leading-relaxed: 1.8;

    --atp-tracking-tight:  -0.025em;
    --atp-tracking-normal: 0em;
    --atp-tracking-wide:   0.05em;

    --atp-weight-regular:  400;
    --atp-weight-medium:   500;
    --atp-weight-semibold: 600;
    --atp-weight-bold:     700;
    --atp-weight-extrabold: 800;

    /* ═══ Espaçamento (escala 4-base) ═══ */
    --atp-space-0:   0;
    --atp-space-1:   0.25rem;  /* 4 */
    --atp-space-2:   0.5rem;   /* 8 */
    --atp-space-3:   0.75rem;  /* 12 */
    --atp-space-4:   1rem;     /* 16 */
    --atp-space-5:   1.25rem;  /* 20 */
    --atp-space-6:   1.5rem;   /* 24 */
    --atp-space-8:   2rem;     /* 32 */
    --atp-space-10:  2.5rem;   /* 40 */
    --atp-space-12:  3rem;     /* 48 */
    --atp-space-16:  4rem;     /* 64 */
    --atp-space-20:  5rem;     /* 80 */
    --atp-space-24:  6rem;     /* 96 */
    --atp-space-32:  8rem;     /* 128 */

    /* ═══ Border radius ═══ */
    --atp-radius-none: 0;
    --atp-radius-sm:   0.25rem;  /* 4 */
    --atp-radius-md:   0.5rem;   /* 8 */
    --atp-radius-lg:   0.75rem;  /* 12 */
    --atp-radius-xl:   1rem;     /* 16 */
    --atp-radius-2xl:  1.5rem;   /* 24 */
    --atp-radius-full: 9999px;

    /* ═══ Sombras (3 níveis + premium glow) ═══ */
    --atp-shadow-xs:   0 1px 2px 0 rgba(19,19,19,.05);
    --atp-shadow-sm:   0 1px 3px 0 rgba(19,19,19,.08), 0 1px 2px -1px rgba(19,19,19,.04);
    --atp-shadow-md:   0 4px 12px -2px rgba(19,19,19,.10), 0 2px 6px -2px rgba(19,19,19,.06);
    --atp-shadow-lg:   0 12px 24px -6px rgba(19,19,19,.12), 0 6px 12px -6px rgba(19,19,19,.08);
    --atp-shadow-xl:   0 24px 40px -10px rgba(19,19,19,.18);
    --atp-shadow-glow: 0 0 0 4px rgba(64,12,109,.18);
    --atp-shadow-gold: 0 8px 24px -4px rgba(212,146,47,.32);

    /* ═══ Motion (cubic-bezier consistente) ═══ */
    --atp-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --atp-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --atp-ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --atp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --atp-duration-fast:   150ms;
    --atp-duration-base:   300ms;
    --atp-duration-slow:   500ms;
    --atp-duration-slower: 750ms;

    /* ═══ Layout / breakpoints (referência) ═══ */
    --atp-bp-sm: 640px;
    --atp-bp-md: 768px;
    --atp-bp-lg: 1024px;
    --atp-bp-xl: 1280px;
    --atp-bp-2xl: 1536px;
    --atp-container: 1200px;

    /* ═══ Z-index scale ═══ */
    --atp-z-base:    0;
    --atp-z-sticky:  100;
    --atp-z-overlay: 500;
    --atp-z-modal:   1000;
    --atp-z-toast:   2000;
}

/* ════════════════════════════════════════════════════════════════
   A11y — restaurar foco visível e respeitar prefers-reduced-motion
   ════════════════════════════════════════════════════════════════ */

*:focus-visible {
    outline: 2px solid var(--atp-brand);
    outline-offset: 2px;
    box-shadow: var(--atp-shadow-glow);
}

/* Skip-to-content link */
.atp-skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--atp-brand);
    color: var(--atp-text-inverse);
    padding: var(--atp-space-3) var(--atp-space-6);
    z-index: var(--atp-z-toast);
    text-decoration: none;
    border-radius: 0 0 var(--atp-radius-md) 0;
}
.atp-skip-to-content:focus {
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Desativar WOW.js animations */
    .wow {
        visibility: visible !important;
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   Componentes utilitários — inicialmente leves, expandir nas próximas sprints
   ════════════════════════════════════════════════════════════════ */

/* Hero hierarchy upgrade */
.banner-section-three .title,
.banner-section-three h1.title {
    font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
    line-height: var(--atp-leading-tight);
    letter-spacing: var(--atp-tracking-tight);
    font-weight: var(--atp-weight-extrabold);
}

/* Buttons — refinar variant primary do tema atual */
.theme-btn.btn-style-one {
    transition: background var(--atp-duration-base) var(--atp-ease),
                transform var(--atp-duration-fast) var(--atp-ease),
                box-shadow var(--atp-duration-base) var(--atp-ease);
    border-radius: var(--atp-radius-lg);
    box-shadow: var(--atp-shadow-md);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: var(--atp-tracking-wide);
}

.theme-btn.btn-style-one:hover,
.theme-btn.btn-style-one:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--atp-shadow-lg), var(--atp-shadow-gold);
}

/* Cards (service-block-twelve, service-block-five) */
.service-block-twelve .inner-box,
.service-block-five .inner-box,
.service-block-seven .inner-box {
    border-radius: var(--atp-radius-xl);
    transition: transform var(--atp-duration-base) var(--atp-ease),
                box-shadow var(--atp-duration-base) var(--atp-ease);
    background: var(--atp-bg);
    box-shadow: var(--atp-shadow-sm);
}

.service-block-twelve .inner-box:hover,
.service-block-five .inner-box:hover,
.service-block-seven .inner-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--atp-shadow-lg);
}

/* Acessibilidade — placeholder com contraste */
::placeholder {
    color: var(--atp-gray-500) !important;
    opacity: 1;
}

/* Acessibilidade — assegurar foco em links/buttons em todos os contextos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--atp-brand);
    outline-offset: 2px;
}

/* Selection styling */
::selection {
    background: var(--atp-brand);
    color: var(--atp-text-inverse);
}

/* Trust signal: badges */
.atp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--atp-space-2);
    padding: var(--atp-space-1) var(--atp-space-3);
    background: var(--atp-brand-soft);
    color: var(--atp-brand);
    border-radius: var(--atp-radius-full);
    font-size: var(--atp-text-sm);
    font-weight: var(--atp-weight-medium);
}

.atp-badge--gold {
    background: var(--atp-gold-100);
    color: var(--atp-gold-700);
}

/* Trust strip (logos clientes) */
.atp-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atp-space-8);
    align-items: center;
    justify-content: center;
    padding: var(--atp-space-8) var(--atp-space-4);
    background: var(--atp-bg-soft);
    border-radius: var(--atp-radius-2xl);
}
.atp-trust-strip img {
    max-height: 48px;
    opacity: 0.7;
    filter: grayscale(1);
    transition: opacity var(--atp-duration-base) var(--atp-ease),
                filter var(--atp-duration-base) var(--atp-ease);
}
.atp-trust-strip img:hover {
    opacity: 1;
    filter: grayscale(0);
}

/* Numbers / stats */
.atp-stat {
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-2);
    padding: var(--atp-space-6);
    border-left: 4px solid var(--atp-accent);
    background: var(--atp-bg);
    border-radius: var(--atp-radius-md);
}
.atp-stat__number {
    font-family: var(--atp-font-mono);
    font-size: var(--atp-text-5xl);
    font-weight: var(--atp-weight-extrabold);
    color: var(--atp-brand);
    letter-spacing: var(--atp-tracking-tight);
    line-height: 1;
}
.atp-stat__label {
    font-size: var(--atp-text-sm);
    color: var(--atp-text-muted);
    letter-spacing: var(--atp-tracking-wide);
    text-transform: uppercase;
}

/* Cookie banner LGPD (Sprint 5 vai estilizar markup, mas tokens já prontos) */
.atp-cookie-banner {
    position: fixed;
    bottom: var(--atp-space-4);
    left: var(--atp-space-4);
    right: var(--atp-space-4);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--atp-space-6);
    background: var(--atp-gray-900);
    color: var(--atp-text-inverse);
    border-radius: var(--atp-radius-xl);
    box-shadow: var(--atp-shadow-xl);
    font-family: var(--atp-font-body);
    font-size: var(--atp-text-sm);
    line-height: var(--atp-leading-snug);
    z-index: var(--atp-z-toast);
    transform: translateY(0);
    transition: transform var(--atp-duration-base) var(--atp-ease),
                opacity var(--atp-duration-base) var(--atp-ease);
}
.atp-cookie-banner[hidden] {
    display: none !important;
}
.atp-cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atp-space-3);
    margin-top: var(--atp-space-4);
}
.atp-cookie-banner__btn {
    flex: 1;
    min-width: 120px;
    padding: var(--atp-space-3) var(--atp-space-5);
    border: 0;
    border-radius: var(--atp-radius-md);
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--atp-weight-semibold);
    transition: background var(--atp-duration-fast) var(--atp-ease);
}
.atp-cookie-banner__btn--primary {
    background: var(--atp-accent);
    color: var(--atp-gray-900);
}
.atp-cookie-banner__btn--primary:hover {
    background: var(--atp-gold-400);
}
.atp-cookie-banner__btn--secondary {
    background: transparent;
    color: var(--atp-white);
    outline: 1px solid var(--atp-gray-500);
}
.atp-cookie-banner__btn--secondary:hover {
    background: var(--atp-gray-700);
}