/* ==========================================================================
   Design tokens — Sistema Empresarial (Pires Embalagens)
   Paleta extraída do logo: laranja #EC8705 · grafite #4E4E4E
   Documentação: docs/09-identidade-visual.md
   --------------------------------------------------------------------------
   Regra: nenhuma cor literal fora deste arquivo. Componentes usam só var().
   ========================================================================== */

:root {
  /* ---------- Escala da marca (laranja) ---------- */
  --marca-50:  #FFF6EB;
  --marca-100: #FEE9CD;
  --marca-200: #FDD39B;
  --marca-300: #FCB85F;
  --marca-400: #FB9F28;
  --marca-500: #EC8705;  /* cor oficial do logo */
  --marca-600: #C87304;
  --marca-700: #A55F03;
  --marca-800: #874E03;
  --marca-900: #693C02;

  /* ---------- Neutros (grafite do logo = 700) ---------- */
  --neutro-0:   #FFFFFF;
  --neutro-50:  #FAFAFA;
  --neutro-100: #F5F5F5;
  --neutro-200: #E8E8E8;
  --neutro-300: #D4D4D4;
  --neutro-400: #A3A3A3;
  --neutro-500: #7A7A7A;
  --neutro-600: #616161;
  --neutro-700: #4E4E4E;  /* cor oficial do texto do logo */
  --neutro-800: #3B3B3B;
  --neutro-900: #292929;
  --neutro-950: #1A1A1A;
  --neutro-1000:#141414;

  /* ---------- Tipografia ---------- */
  --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --txt-xs:   0.75rem;   /* 12px — legendas, badges              */
  --txt-sm:   0.875rem;  /* 14px — tabelas, labels, inputs       */
  --txt-base: 1rem;      /* 16px — corpo                          */
  --txt-lg:   1.125rem;  /* 18px — subtítulo                      */
  --txt-xl:   1.375rem;  /* 22px — título de página               */
  --txt-2xl:  1.75rem;   /* 28px — dashboard                      */
  --txt-3xl:  2.25rem;   /* 36px — números de destaque            */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  --altura-apertada: 1.25;
  --altura-normal:   1.5;

  /* ---------- Espaçamento (escala 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;

  /* ---------- Raio ---------- */
  --raio-sm:   4px;
  --raio-md:   6px;
  --raio-lg:   10px;
  --raio-xl:   16px;
  --raio-full: 9999px;

  /* ---------- Layout ---------- */
  --largura-menu:            256px;
  --largura-menu-recolhido:  64px;
  --altura-topo:             56px;
  --largura-conteudo:        1440px;

  /* ---------- Movimento ---------- */
  --transicao-rapida: 120ms ease;
  --transicao-media:  200ms ease;

  /* ---------- Camadas ---------- */
  --z-menu:    100;
  --z-topo:    200;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   1100;
}

/* ==========================================================================
   TEMA CLARO — padrão. Definido no :root puro para nunca faltar valor.
   ========================================================================== */

:root {
  --cor-fundo:            var(--neutro-50);
  --cor-superficie:       var(--neutro-0);
  --cor-superficie-alt:   var(--neutro-100);
  --cor-superficie-hover: var(--neutro-100);
  --cor-borda:            var(--neutro-200);
  --cor-borda-forte:      var(--neutro-300);

  --cor-texto:            var(--neutro-900);
  --cor-texto-suave:      var(--neutro-600);
  --cor-texto-fraco:      var(--neutro-500);
  --cor-texto-invertido:  var(--neutro-0);

  /* Marca aplicada */
  --cor-marca:            var(--marca-500);
  --cor-marca-hover:      var(--marca-600);
  /* Texto/ícone laranja sobre fundo claro precisa do tom 700 p/ passar AA (4.96:1) */
  --cor-marca-texto:      var(--marca-700);
  --cor-marca-suave:      var(--marca-50);
  --cor-marca-borda:      var(--marca-200);
  /* Sobre o laranja da marca vai texto quase preto (6.66:1) — branco reprova em AA */
  --cor-sobre-marca:      var(--neutro-950);

  /* Menu lateral — grafite do logo, sempre escuro nos dois temas */
  --cor-menu-fundo:       var(--neutro-800);
  --cor-menu-texto:       var(--neutro-300);
  --cor-menu-texto-ativo: var(--neutro-0);
  --cor-menu-ativo:       var(--marca-500);
  --cor-menu-hover:       #4A4A4A;

  /* Semânticas */
  --cor-sucesso:        #2CBA77;
  --cor-sucesso-texto:  #1B744A;
  --cor-sucesso-fundo:  #EEFBF5;
  --cor-sucesso-borda:  #C3EEDA;

  --cor-aviso:          #E0A906;
  --cor-aviso-texto:    #906D04;
  --cor-aviso-fundo:    #FEFAEB;
  --cor-aviso-borda:    #FAE7B2;

  --cor-erro:           #DF3F3A;
  --cor-erro-texto:     #AF211D;
  --cor-erro-fundo:     #FCEEED;
  --cor-erro-borda:     #F6C9C7;

  --cor-info:           #308CE8;
  --cor-info-texto:     #1259A1;
  --cor-info-fundo:     #EDF5FD;
  --cor-info-borda:     #C6DFF8;

  /* Financeiro — entrada x saída */
  --cor-entrada: var(--cor-sucesso-texto);
  --cor-saida:   var(--cor-erro-texto);

  /* Sombra e foco */
  --sombra-sm:  0 1px 2px rgba(0,0,0,.06);
  --sombra-md:  0 2px 8px rgba(0,0,0,.08);
  --sombra-lg:  0 8px 24px rgba(0,0,0,.12);
  --cor-foco:   var(--marca-500);
  --anel-foco:  0 0 0 3px rgba(236,135,5,.35);

  --logo-url: url("../img/logo.webp");
  color-scheme: light;
}

/* ==========================================================================
   TEMA ESCURO
   Só os tokens semânticos mudam — a escala da marca continua a mesma.
   Aplicado quando: (a) o SO pede escuro e o usuário não escolheu claro,
                    (b) o usuário escolheu escuro explicitamente.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo:            var(--neutro-1000);
    --cor-superficie:       #1F1F1F;
    --cor-superficie-alt:   var(--neutro-900);
    --cor-superficie-hover: #2E2E2E;
    --cor-borda:            #333333;
    --cor-borda-forte:      #454545;

    --cor-texto:            var(--neutro-100);
    --cor-texto-suave:      var(--neutro-400);
    --cor-texto-fraco:      var(--neutro-500);
    --cor-texto-invertido:  var(--neutro-950);

    --cor-marca:            var(--marca-500);
    --cor-marca-hover:      var(--marca-400);
    --cor-marca-texto:      var(--marca-400);  /* 8.85:1 sobre o fundo escuro */
    --cor-marca-suave:      #33230A;
    --cor-marca-borda:      #5C3F0C;
    --cor-sobre-marca:      var(--neutro-950);

    --cor-menu-fundo:       #1A1A1A;
    --cor-menu-texto:       var(--neutro-400);
    --cor-menu-texto-ativo: var(--neutro-0);
    --cor-menu-ativo:       var(--marca-500);
    --cor-menu-hover:       #2E2E2E;

    --cor-sucesso:        #45D391;
    --cor-sucesso-texto:  #62DAA2;
    --cor-sucesso-fundo:  #123022;
    --cor-sucesso-borda:  #1E5138;

    --cor-aviso:          #F9C31F;
    --cor-aviso-texto:    #FACC42;
    --cor-aviso-fundo:    #352B0D;
    --cor-aviso-borda:    #5C4A15;

    --cor-erro:           #E45D58;
    --cor-erro-texto:     #E9807C;
    --cor-erro-fundo:     #391413;
    --cor-erro-borda:     #5E2321;

    --cor-info:           #519EEC;
    --cor-info-texto:     #7BB6F1;
    --cor-info-fundo:     #11263B;
    --cor-info-borda:     #1D4670;

    --cor-entrada: var(--cor-sucesso-texto);
    --cor-saida:   var(--cor-erro-texto);

    --sombra-sm:  0 1px 2px rgba(0,0,0,.4);
    --sombra-md:  0 2px 8px rgba(0,0,0,.5);
    --sombra-lg:  0 8px 24px rgba(0,0,0,.6);
    --anel-foco:  0 0 0 3px rgba(251,159,40,.4);

    --logo-url: url("../img/logo-dark.webp");
    color-scheme: dark;
  }
}

/* Escolha explícita do usuário vence o SO nos dois sentidos */
:root[data-tema="escuro"] {
  --cor-fundo:            var(--neutro-1000);
  --cor-superficie:       #1F1F1F;
  --cor-superficie-alt:   var(--neutro-900);
  --cor-superficie-hover: #2E2E2E;
  --cor-borda:            #333333;
  --cor-borda-forte:      #454545;

  --cor-texto:            var(--neutro-100);
  --cor-texto-suave:      var(--neutro-400);
  --cor-texto-fraco:      var(--neutro-500);
  --cor-texto-invertido:  var(--neutro-950);

  --cor-marca:            var(--marca-500);
  --cor-marca-hover:      var(--marca-400);
  --cor-marca-texto:      var(--marca-400);
  --cor-marca-suave:      #33230A;
  --cor-marca-borda:      #5C3F0C;
  --cor-sobre-marca:      var(--neutro-950);

  --cor-menu-fundo:       #1A1A1A;
  --cor-menu-texto:       var(--neutro-400);
  --cor-menu-texto-ativo: var(--neutro-0);
  --cor-menu-ativo:       var(--marca-500);
  --cor-menu-hover:       #2E2E2E;

  --cor-sucesso:        #45D391;
  --cor-sucesso-texto:  #62DAA2;
  --cor-sucesso-fundo:  #123022;
  --cor-sucesso-borda:  #1E5138;

  --cor-aviso:          #F9C31F;
  --cor-aviso-texto:    #FACC42;
  --cor-aviso-fundo:    #352B0D;
  --cor-aviso-borda:    #5C4A15;

  --cor-erro:           #E45D58;
  --cor-erro-texto:     #E9807C;
  --cor-erro-fundo:     #391413;
  --cor-erro-borda:     #5E2321;

  --cor-info:           #519EEC;
  --cor-info-texto:     #7BB6F1;
  --cor-info-fundo:     #11263B;
  --cor-info-borda:     #1D4670;

  --cor-entrada: var(--cor-sucesso-texto);
  --cor-saida:   var(--cor-erro-texto);

  --sombra-sm:  0 1px 2px rgba(0,0,0,.4);
  --sombra-md:  0 2px 8px rgba(0,0,0,.5);
  --sombra-lg:  0 8px 24px rgba(0,0,0,.6);
  --anel-foco:  0 0 0 3px rgba(251,159,40,.4);

  --logo-url: url("../img/logo-dark.webp");
  color-scheme: dark;
}