/* ============================================================
   POWERFULL v2 — TEMA (tokens + base + acessibilidade)
   Tema único ESCURO — carvão quase-preto neutro + teal do escudo da
   logo + prata/cromo do metal. Todos os componentes leem estes tokens.
   Identidade: teal #1f6b7e (marca/ativo) · prata #cdd3da (metal/realces).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ---------- DARK (único) — carvão quase-preto, acento teal + prata ---------- */
:root,
[data-theme="dark"]{
  color-scheme:dark;
  /* Superfícies — carvão quase-preto neutro, cards em degraus sutis */
  --bg:        #0b0c0e;
  --bg-2:      #101216;
  --card:      #15171b;
  --card-2:    #1c1f24;
  --card-3:    #262a31;
  --card-deep: #0f1114;
  --border:    #23262c;
  --border-2:  #343941;

  /* Texto — branco levemente frio (prata) */
  --text:      #f2f4f6;
  --text-2:    #a7adb6;
  --text-3:    #6d727b;

  /* Marca / ativo — TEAL do escudo da logo */
  --petrol:     #1f6b7e;
  --petrol-700: #195563;
  --petrol-400: #2f8ba2;
  --petrol-300: #5cbdd2;
  --petrol-tint: rgba(92,189,210,0.13);
  --petrol-line: rgba(92,189,210,0.34);

  /* Ação — clicável; teal vivo (sem azul) */
  --action:    #2a93ab;
  --action-h:  #237f95;
  --action-300:#64c4d8;
  --action-tint: rgba(42,147,171,0.16);

  /* Prata / cromo — metal da logo (brand, realces, detalhes) */
  --silver:      #cdd3da;
  --silver-2:    #9aa1ab;
  --silver-tint: rgba(205,211,218,0.10);
  --silver-line: rgba(205,211,218,0.22);

  /* Semânticos */
  --green:   #1cb583;  --green-2: #3ad29c;  --green-tint: rgba(28,181,131,0.14);
  --red:     #ef4d5e;  --red-2:   #f87a86;  --red-tint:   rgba(239,77,94,0.14);
  --amber:   #e0a23a;  --orange:  #e8862f;  --amber-tint: rgba(224,162,58,0.14);
  --purple:  #5cbdd2;  --purple-tint: rgba(92,189,210,0.13);
  --slate:   #8a929d;  --slate-tint:  rgba(138,146,157,0.16);

  --chrome: linear-gradient(176deg,#f4f6f8 0%,#cfd6dd 30%,#9aa5b0 50%,#e6ebef 64%,#aab3bd 82%,#7e8893 100%);

  --r:    6px;
  --r-sm: 4px;
  --r-lg: 10px;
  --r-card: 14px;
  --shadow:    0 8px 26px rgba(0,0,0,0.5);
  --shadow-lg: 0 22px 60px rgba(0,0,0,0.62);

  --hair:        rgba(255,255,255,0.035);
  --th-grad-top: #0c0e11;
  --app-glow-1:  rgba(92,189,210,0.10);
  --app-glow-2:  rgba(205,211,218,0.04);
  --login-bg:    #0a0b0d;
  --scrim:       rgba(3,4,6,0.78);
  --topbar-bg:   rgba(15,17,20,0.9);
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  color:var(--text);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0.01em;
  background:
    radial-gradient(125% 80% at 100% -8%, var(--app-glow-1), transparent 52%),
    radial-gradient(90% 70% at -12% 108%, var(--app-glow-2), transparent 50%),
    var(--bg);
  background-attachment:fixed;
  transition:background-color .25s ease, color .25s ease;
}

/* scrollbar técnica */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:10px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--petrol-400); }

/* ---------- utilitárias tipográficas ---------- */
.head{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; }
.mono{ font-family:'Share Tech Mono',monospace; }
.chrome-text{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}

/* ============================================================
   ACESSIBILIDADE — foco visível, alvos, motion
   ============================================================ */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--action-300);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.skip-link{
  position:fixed; left:14px; top:-60px; z-index:400;
  background:var(--action); color:#fff; padding:10px 16px; border-radius:var(--r);
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; font-weight:600;
  transition:top .18s;
}
.skip-link:focus{ top:14px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}