/* ==========================================================================
   MONSTER — DESIGN TOKENS
   --------------------------------------------------------------------------
   Paleta extraída do logo (logo.jpg) e validada em WCAG 2.1.
   Documentação: docs/09-identidade-visual.md

   Carregar SEMPRE antes de base.css e do CSS de página.
   Nenhum componente deve usar hex solto — só as variáveis daqui.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       LARANJA — cor da marca (garra e "MOTOPARTS" do logo)
       Núcleo lido do arquivo: #E76408
       ---------------------------------------------------------------------- */
    --laranja-50:  #FFF4EC;
    --laranja-100: #FFE3CE;
    --laranja-200: #FFC49B;
    --laranja-300: #FF9E5E;
    --laranja-400: #FA7C2B;
    --laranja-500: #E76408;   /* COR DA MARCA */
    --laranja-600: #C25109;
    --laranja-700: #9A400B;
    --laranja-800: #78330C;
    --laranja-900: #5C280B;
    --laranja-950: #331406;

    /* ----------------------------------------------------------------------
       GRAFITE — neutro quente (fundo do logo)
       ---------------------------------------------------------------------- */
    --grafite-50:  #F6F4F3;
    --grafite-100: #E5E2E0;
    --grafite-200: #C9C4C1;
    --grafite-300: #A69F9B;
    --grafite-400: #7D7671;
    --grafite-500: #5A5450;
    --grafite-600: #403B38;
    --grafite-700: #2B2725;
    --grafite-800: #1C1918;
    --grafite-900: #121110;
    --grafite-950: #0A0908;

    /* ----------------------------------------------------------------------
       PRATA — metal escovado do "MONSTER". Só detalhe, nunca área grande.
       ---------------------------------------------------------------------- */
    --prata-claro:  #E9EAE9;
    --prata:        #B3B3B2;
    --prata-escuro: #8A8A89;

    /* ----------------------------------------------------------------------
       SEMÂNTICAS — valores para FUNDO CLARO (tema padrão)
       ---------------------------------------------------------------------- */
    --sucesso:        #14713C;   /* 6,07:1 sobre branco — AA */
    --sucesso-suave:  #E3F5EA;
    --sucesso-borda:  #A8DCC0;

    --aviso:          #8A5A02;   /* 5,93:1 — AA */
    --aviso-suave:    #FDF2DD;
    --aviso-borda:    #F0CE8A;

    --erro:           #C42B1C;   /* 5,66:1 — AA */
    --erro-suave:     #FCE9E7;
    --erro-borda:     #F3B4AD;

    --info:           #1F6FB2;   /* 5,28:1 — AA */
    --info-suave:     #E6F1FA;
    --info-borda:     #A9CDEA;

    /* ----------------------------------------------------------------------
       PAPÉIS — tema CLARO (loja: catálogo, produto, carrinho, checkout;
       painel do cliente; painel admin)
       ---------------------------------------------------------------------- */
    --fundo:              var(--grafite-50);
    --fundo-superficie:   #FFFFFF;
    --fundo-elevado:      #FFFFFF;
    --fundo-sutil:        var(--grafite-100);
    --fundo-inverso:      var(--grafite-950);

    --texto:              var(--grafite-900);
    --texto-suave:        var(--grafite-500);
    --texto-fraco:        var(--grafite-400);
    --texto-inverso:      #FFFFFF;
    --texto-marca:        var(--laranja-600);   /* laranja legível no claro */

    --borda:              var(--grafite-100);
    --borda-forte:        var(--grafite-200);
    --borda-marca:        var(--laranja-500);

    --foco:               var(--laranja-600);   /* 4,69:1 sobre branco */

    /* Botão primário — laranja da marca + texto escuro = 5,90:1 (AA).
       Texto BRANCO sobre esse laranja daria 3,37:1 e reprovaria. */
    --btn-primario-fundo:        var(--laranja-500);
    --btn-primario-texto:        var(--grafite-950);
    --btn-primario-fundo-hover:  var(--laranja-600);
    --btn-primario-texto-hover:  #FFFFFF;

    /* Preço */
    --preco:              var(--laranja-600);
    --preco-anterior:     var(--grafite-400);

    /* ----------------------------------------------------------------------
       TIPOGRAFIA — fontes self-hosted (CSP: font-src 'self')
       ---------------------------------------------------------------------- */
    --fonte-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --fonte-corpo:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --txt-xs:   0.75rem;
    --txt-sm:   0.875rem;
    --txt-base: 1rem;
    --txt-lg:   1.125rem;
    --txt-xl:   1.25rem;
    --txt-2xl:  1.5rem;
    --txt-3xl:  1.875rem;
    --txt-4xl:  2.25rem;
    --txt-5xl:  3rem;

    --peso-normal:    400;
    --peso-medio:     500;
    --peso-semi:      600;
    --peso-negrito:   700;
    --peso-extra:     800;

    --altura-apertada: 1.15;
    --altura-normal:   1.5;
    --altura-solta:    1.75;

    /* ----------------------------------------------------------------------
       ESPAÇAMENTO — escala de 4px
       ---------------------------------------------------------------------- */
    --esp-1:  0.25rem;
    --esp-2:  0.5rem;
    --esp-3:  0.75rem;
    --esp-4:  1rem;
    --esp-5:  1.25rem;
    --esp-6:  1.5rem;
    --esp-8:  2rem;
    --esp-10: 2.5rem;
    --esp-12: 3rem;
    --esp-16: 4rem;
    --esp-20: 5rem;

    /* ----------------------------------------------------------------------
       RAIO — contido: o logo é anguloso e industrial
       ---------------------------------------------------------------------- */
    --raio-sm:   4px;
    --raio:      6px;
    --raio-md:   8px;
    --raio-lg:   12px;
    --raio-full: 9999px;

    /* ----------------------------------------------------------------------
       SOMBRA
       ---------------------------------------------------------------------- */
    --sombra-sm:      0 1px 2px rgba(10, 9, 8, 0.06);
    --sombra:         0 2px 8px rgba(10, 9, 8, 0.10);
    --sombra-lg:      0 8px 24px rgba(10, 9, 8, 0.14);
    --sombra-laranja: 0 4px 16px rgba(231, 100, 8, 0.30);

    /* ----------------------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------------------- */
    --largura-max:      1280px;
    --largura-texto:    68ch;
    --altura-header:    72px;
    --alvo-toque:       44px;

    /* ----------------------------------------------------------------------
       TRANSIÇÃO
       ---------------------------------------------------------------------- */
    --transicao-rapida: 120ms ease-out;
    --transicao:        200ms ease-out;
    --transicao-lenta:  320ms ease-out;

    /* ----------------------------------------------------------------------
       CAMADAS
       ---------------------------------------------------------------------- */
    --z-base:     1;
    --z-suspenso: 10;
    --z-fixo:     100;
    --z-header:   200;
    --z-menu:     300;
    --z-overlay:  400;
    --z-modal:    500;
    --z-aviso:    600;
}


/* ==========================================================================
   TEMA ESCURO
   Ativa por preferência do sistema OU por [data-tema="escuro"] no <html>.
   Só os PAPÉIS mudam — a escala de cor é a mesma.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fundo:              var(--grafite-900);
        --fundo-superficie:   var(--grafite-800);
        --fundo-elevado:      var(--grafite-700);
        --fundo-sutil:        var(--grafite-800);
        --fundo-inverso:      var(--grafite-50);

        --texto:              #FFFFFF;
        --texto-suave:        var(--grafite-300);
        --texto-fraco:        var(--grafite-400);
        --texto-inverso:      var(--grafite-950);
        --texto-marca:        var(--laranja-400);   /* 7,17:1 — AAA */

        --borda:              var(--grafite-700);
        --borda-forte:        var(--grafite-600);

        --foco:               var(--laranja-400);

        --btn-primario-fundo:        var(--laranja-500);
        --btn-primario-texto:        var(--grafite-950);
        --btn-primario-fundo-hover:  var(--laranja-400);
        --btn-primario-texto-hover:  var(--grafite-950);

        --preco:              var(--laranja-400);
        --preco-anterior:     var(--grafite-400);

        --sucesso:            #3FBF77;   /* 8,02:1 — AAA */
        --sucesso-suave:      #14301F;
        --sucesso-borda:      #235E3C;

        --aviso:              #F0A93B;   /* 9,38:1 — AAA */
        --aviso-suave:        #33240A;
        --aviso-borda:        #6B4A13;

        --erro:               #F26A5A;   /* 6,27:1 — AA */
        --erro-suave:         #341614;
        --erro-borda:         #6E2C25;

        --info:               #4FA3DE;   /* 6,85:1 — AA */
        --info-suave:         #10222F;
        --info-borda:         #24506E;

        /* Sombra preta some no escuro — o relevo vem da borda */
        --sombra-sm:  0 0 0 1px var(--grafite-700);
        --sombra:     0 0 0 1px var(--grafite-600);
        --sombra-lg:  0 8px 24px rgba(0, 0, 0, 0.55);
    }
}

:root[data-tema="escuro"] {
    --fundo:              var(--grafite-900);
    --fundo-superficie:   var(--grafite-800);
    --fundo-elevado:      var(--grafite-700);
    --fundo-sutil:        var(--grafite-800);
    --fundo-inverso:      var(--grafite-50);

    --texto:              #FFFFFF;
    --texto-suave:        var(--grafite-300);
    --texto-fraco:        var(--grafite-400);
    --texto-inverso:      var(--grafite-950);
    --texto-marca:        var(--laranja-400);

    --borda:              var(--grafite-700);
    --borda-forte:        var(--grafite-600);

    --foco:               var(--laranja-400);

    --btn-primario-fundo:        var(--laranja-500);
    --btn-primario-texto:        var(--grafite-950);
    --btn-primario-fundo-hover:  var(--laranja-400);
    --btn-primario-texto-hover:  var(--grafite-950);

    --preco:              var(--laranja-400);
    --preco-anterior:     var(--grafite-400);

    --sucesso:            #3FBF77;
    --sucesso-suave:      #14301F;
    --sucesso-borda:      #235E3C;

    --aviso:              #F0A93B;
    --aviso-suave:        #33240A;
    --aviso-borda:        #6B4A13;

    --erro:               #F26A5A;
    --erro-suave:         #341614;
    --erro-borda:         #6E2C25;

    --info:               #4FA3DE;
    --info-suave:         #10222F;
    --info-borda:         #24506E;

    --sombra-sm:  0 0 0 1px var(--grafite-700);
    --sombra:     0 0 0 1px var(--grafite-600);
    --sombra-lg:  0 8px 24px rgba(0, 0, 0, 0.55);
}


/* ==========================================================================
   FAIXA ESCURA — header, footer e hero da loja usam SEMPRE fundo escuro,
   independentemente do tema, porque é onde o logo vive.
   ========================================================================== */

.faixa-escura {
    --fundo-superficie: var(--grafite-800);
    --texto:            #FFFFFF;
    --texto-suave:      var(--grafite-300);
    --texto-marca:      var(--laranja-400);
    --borda:            var(--grafite-700);
    --foco:             var(--laranja-400);

    background-color: var(--grafite-950);
    color: var(--texto);
}