/* Aura — tema Cyber E-dux (roxo + laranja)
   Marca do cliente. Gradiente roxo na faixa de topo e no painel de estado; laranja em foco e destaque.
   Toda cor vem daqui. Nenhum valor fixo em regra de componente. */

:root{
  --font-ui: 'Poppins', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-brand: 'Michroma', sans-serif;

  --bg:#F7F4FB;
  --surface:#FFFFFF;
  --surface-2:#F0EAF8;
  --surface-3:#E4D9F3;
  --deep:#4A1D82;
  --deep-grad: linear-gradient(135deg,#5B2296 0%,#7B33C4 60%,#8B3FD4 100%);
  --ink:#231433;
  --ink-2:#5B4C6B;
  --ink-inv:#FBF7FF;
  --ink-inv-2:#C9B6E4;
  --line:#E2D8EF;
  --line-2:#C9B8E0;

  --brand:#6D28AF;
  --brand-hover:#581F91;
  --brand-ink:#FFFFFF;
  --brand-fill:#EFE4FB;
  --accent:#F59E0B;
  --accent-ink:#2A1600;
  --accent-fill:#FCEFD6;

  --ok:#0B6B4A;  --ok-ink:#FFFFFF; --ok-fill:#D9EFE6;
  --warn:#8A5300; --warn-ink:#FFFFFF; --warn-fill:#FBEBD2;
  --danger:#A82018; --danger-ink:#FFFFFF; --danger-fill:#FBE0DD;
  --focus:#F59E0B;

  --shadow: 0 1px 2px rgba(35,20,51,.08), 0 12px 30px rgba(74,29,130,.10);
  --shadow-sm: 0 1px 2px rgba(35,20,51,.10);
  /* raio, borda, sombra, tipografia */
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --bw: 1px;
  --bw-strong: 2px;
  --focus-w: 3px;

  --fs-display: clamp(38px, 5vw, 54px);
  --fs-h1: clamp(30px, 4vw, 44px);
  --fs-h2: 24px;
  --fs-h3: 21px;
  --fs-body: 17px;
  --fs-support: 16px;
  --fs-label: 14px;   /* minimo do sistema */

  --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 18px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 52px;

  /* Os sinais da assinatura no rodape, na cor de destaque deste tema. */
  --assinatura-cor: var(--accent);
}

:root[data-theme="dark"]{
  --bg:#120B1C;
  --surface:#1B1128;
  --surface-2:#241733;
  --surface-3:#2F2043;
  --deep:#0D0715;
  --deep-grad: linear-gradient(135deg,#1E1130 0%,#331B54 60%,#3F2168 100%);
  --ink:#EFE8F7;
  --ink-2:#B3A3C6;
  --ink-inv:#EFE8F7;
  --ink-inv-2:#A18FBB;
  --line:#2E2140;
  --line-2:#3F2F55;

  --brand:#C39BF2;
  --brand-hover:#D3B4F7;
  --brand-ink:#1B0B2E;
  --brand-fill:#291840;
  --accent:#F5B841;
  --accent-ink:#2A1600;
  --accent-fill:#33240D;

  --ok:#6CC79E; --ok-ink:#062018; --ok-fill:#122A21;
  --warn:#DCAC6C; --warn-ink:#221805; --warn-fill:#2A2113;
  --danger:#EE9188; --danger-ink:#2A1210; --danger-fill:#301A18;
  --focus:#F5B841;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.40);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
}

/* Se o usuario nao escolheu nada, segue o sistema */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120B1C;
    --surface:#1B1128;
    --surface-2:#241733;
    --surface-3:#2F2043;
    --deep:#0D0715;
    --deep-grad: linear-gradient(135deg,#1E1130 0%,#331B54 60%,#3F2168 100%);
    --ink:#EFE8F7;
    --ink-2:#B3A3C6;
    --ink-inv:#EFE8F7;
    --ink-inv-2:#A18FBB;
    --line:#2E2140;
    --line-2:#3F2F55;
  
    --brand:#C39BF2;
    --brand-hover:#D3B4F7;
    --brand-ink:#1B0B2E;
    --brand-fill:#291840;
    --accent:#F5B841;
    --accent-ink:#2A1600;
    --accent-fill:#33240D;
  
    --ok:#6CC79E; --ok-ink:#062018; --ok-fill:#122A21;
    --warn:#DCAC6C; --warn-ink:#221805; --warn-fill:#2A2113;
    --danger:#EE9188; --danger-ink:#2A1210; --danger-fill:#301A18;
    --focus:#F5B841;
  
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.40);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  }
}


/* ---------------------------------------------------------------- barra e marca
   O kit não trouxe logotipo nem tratamento de barra, e sem isto os cinco temas dividiam a mesma
   faixa escura e a mesma marca — só a paleta mudava. Estas variáveis são o contrato; o portal
   desenha tudo em CSS puro, sem imagem e sem SVG.

   Nos protótipos, **quatro das cinco barras são claras**. Só este tema usa a faixa escura, porque o
   gradiente é a marca do cliente.

   A marca aqui é uma **pílula preenchida com o laranja de destaque**, com a palavra dentro. */
:root{
  --barra-fundo: var(--deep-grad);
  --barra-texto: var(--ink-inv);
  --barra-texto-2: var(--ink-inv-2);
  --barra-linha: rgb(255 255 255 / .22);
  --barra-hover: rgb(255 255 255 / .14);
  --barra-borda: 0;
  --barra-borda-cor: transparent;

  /* O logotipo do cliente: anel laranja com uma falha branca e o centro roxo. Duas camadas num
     `background` só — a de cima é o disco central, a de baixo o anel. */
  --marca-ponto: 38px;
  --marca-ponto-cor:
    radial-gradient(circle 11px at 50% 50%, var(--deep) 99%, transparent 100%),
    conic-gradient(from 210deg, var(--accent) 0deg 200deg, #FFFFFF 200deg 260deg, var(--accent) 260deg 360deg);
  --marca-ponto-halo: none;

  /* Sem placa em volta: aqui o peso está no anel e no nome. */
  --marca-fundo: transparent;
  --marca-cor: var(--ink-inv);
  --marca-borda: 0;
  --marca-borda-cor: transparent;
  --marca-raio: 0;
  --marca-padding: 0;
  --marca-tamanho: 20px;
  --marca-peso: 400;
  --marca-espaco: .02em;
  --marca-caixa: uppercase;
  --marca-parafusos: none;

  /* **É a marca do cliente que assina este tema**, e não a do produto. É o único dos cinco em que o
     nome muda — por isso o nome vem do tema, e não da marcação. */
  --marca-nome: "Cyber E-dux";
}