/*
  Prime Star — design tokens
  Este é o arquivo que um FUTURO CLIENTE do mesmo nicho edita para reskinar
  o template inteiro: troque os valores de cor/tipografia/raio aqui, nada
  em base.css ou charts.css deveria precisar mudar.
*/
:root{
  /* ---- Marca: azul-petróleo dominante + branco predominante (pedido do briefing) ---- */
  --petroleo:       #0B3B4D;   /* primário — headers, nav, seções de autoridade */
  --petroleo-600:   #0F4D63;   /* hover / step mais claro do primário */
  --petroleo-800:   #072731;   /* mais escuro — footer, texto sobre --gelo */
  --petroleo-pale:  #E4EDF0;   /* superfície tingida de petróleo — cards, badges */

  --branco:  #FFFFFF;
  --gelo:    #F6F8F8;   /* fundo de página — cinza claro de apoio */
  --gelo-2:  #EBEFF0;   /* superfície secundária, hairlines de preenchimento */
  --cartao:  #FFFFFF;

  --tinta:   #10181C;   /* texto primário */
  --sub:     #4B5A61;   /* texto secundário */
  --muted:   #7C8A90;   /* legendas, eixos, texto terciário */
  --linha:   rgba(16,24,28,.12);

  /*
    Accent — mesmos hex validados pelo skill de dataviz (slots categóricos 1–3,
    os únicos que passam CVD "all-pairs" nos dois modos). Reaproveitar aqui garante
    que o botão/indicador de marca e a barra do gráfico "conversem" com a mesma cor.
  */
  --laranja:   #EB6834;   /* accent principal — CTAs, indicadores de destaque */
  --laranja-600: #D95926; /* hover do accent */
  --laranja-texto: #B8451A; /* variante escura, uso exclusivo em TEXTO pequeno sobre fundo claro — só essa passa 4.5:1 AA; --laranja/--laranja-600 servem para bordas, ícones e áreas ≥3:1 */
  --aqua:      #1BAF7A;   /* accent secundário — selos, estado positivo */
  --azul-dado: #2A78D6;   /* azul de dado (mais vívido que --petroleo, escopo de gráfico) */

  /* --petroleo-texto: variante de --petroleo para uso em TEXTO/ícone sobre fundo que muda com o tema
     (títulos h1–h4, rótulos, ícones de badge). Em claro é igual a --petroleo; em escuro vira o mesmo
     teal claro já usado em eyebrows/footer (#7FD1C9), porque --petroleo puro (escuro) sobre fundo
     escuro (--gelo/--cartao em modo escuro) cai para ~1.5:1 de contraste — ilegível. */
  --petroleo-texto: #0B3B4D;
  /* --header-bg / --borda-ghost: mesma lógica — cabeçalho e borda de botão-fantasma eram cor fixa
     e não seguiam o tema, ficando com texto claro sobre fundo claro (ou borda invisível) no escuro. */
  --header-bg: rgba(246,248,248,.92);
  --borda-ghost: rgba(16,24,28,.28);

  /* status (sempre com ícone + rótulo, nunca só a cor) */
  --bom:      #0CA30C;
  --critico:  #D03B3B;

  /* ---- Tipografia ---- */
  --display: "Archivo", sans-serif;
  --sans:    "IBM Plex Sans", sans-serif;
  --mono:    "IBM Plex Mono", monospace;

  /* ---- Forma ---- */
  --radius:    4px;
  --radius-lg: 10px;
  --container: 1200px;
  --container-narrow: 820px;

  --sombra: 0 20px 44px rgba(11,59,77,.12);
  --sombra-lg: 0 30px 60px rgba(11,59,77,.18);

  /* ---- Redesign fotografico: overlay sobre foto ---- */
  --aqua-tinta: #7FD1C9;
  --scrim-forte: rgba(7,39,49,.90);
  --scrim-leve:  rgba(7,39,49,.40);

  /*
    ---- Motion — gramática única do site ----
    Princípio: "leitura de instrumento" — uma medição assentando, nunca elástico,
    nunca bounce/overshoot. --e-settle para tudo que ENTRA (reveal, gráfico,
    contador); --e-resp para tudo que RESPONDE a input (hover, foco). Nenhuma
    transition no projeto deveria usar "ease" solto — sempre um destes dois.
  */
  --e-settle: cubic-bezier(.16,.84,.30,1);
  --e-resp:   cubic-bezier(.33,0,.20,1);
  --t-1: 120ms;  /* hover de cor/borda */
  --t-2: 240ms;  /* transform de hover */
  --t-3: 520ms;  /* reveal por scroll */
  --t-4: 900ms;  /* desenho de gráfico, contador */
}

@media (prefers-color-scheme: dark){
  :root{
    --gelo:    #0D1417;
    --gelo-2:  #171F23;
    --cartao:  #131B1F;
    --tinta:   #F1F4F5;
    --sub:     #B9C4C8;
    --muted:   #7C8A90;
    --linha:   rgba(241,244,245,.14);
    --petroleo-pale: #12242B;
    --sombra: 0 20px 44px rgba(0,0,0,.4);
    --sombra-lg: 0 30px 60px rgba(0,0,0,.5);
    --laranja-texto: #EB6834; /* sobre fundo escuro o laranja vívido já passa 4.5:1 — não precisa escurecer */
    --petroleo-texto: #7FD1C9;
    --header-bg: rgba(13,20,23,.92);
    --borda-ghost: rgba(241,244,245,.32);
  }
}
:root[data-theme="dark"]{
  --gelo:    #0D1417;
  --gelo-2:  #171F23;
  --cartao:  #131B1F;
  --tinta:   #F1F4F5;
  --sub:     #B9C4C8;
  --muted:   #7C8A90;
  --linha:   rgba(241,244,245,.14);
  --petroleo-pale: #12242B;
  --laranja-texto: #EB6834;
  --petroleo-texto: #7FD1C9;
  --header-bg: rgba(13,20,23,.92);
  --borda-ghost: rgba(241,244,245,.32);
}
:root[data-theme="light"]{
  --gelo:    #F6F8F8;
  --gelo-2:  #EBEFF0;
  --cartao:  #FFFFFF;
  --tinta:   #10181C;
  --sub:     #4B5A61;
  --muted:   #7C8A90;
  --linha:   rgba(16,24,28,.12);
  --petroleo-pale: #E4EDF0;
  --laranja-texto: #B8451A;
  --petroleo-texto: #0B3B4D;
  --header-bg: rgba(246,248,248,.92);
  --borda-ghost: rgba(16,24,28,.28);
}