/* ============================================================
   REDES.LAB ON · Sistema visual Redes.Lab
   Vale Sans · framboesa + ouro + creme · claro primário + escuro
   ============================================================ */

/* ---- Fontes ---- */
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Thin.ttf") format("truetype");font-weight:100;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Extralight.ttf") format("truetype");font-weight:200;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Light.ttf") format("truetype");font-weight:300;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Medium.ttf") format("truetype");font-weight:500;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Semibold.ttf") format("truetype");font-weight:600;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Extrabold.ttf") format("truetype");font-weight:800;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-Black.ttf") format("truetype");font-weight:900;font-display:swap;}
@font-face{font-family:"Vale Sans";src:url("../fonts/ValeSans-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap;}

:root{
  /* Constantes de marca Redes.Lab (nomes mantidos, valores da identidade) */
  --azul-noite:#2A1018;      /* tinta profunda, quase preto ameixa */
  --azul-eletrico:#4A72A8;   /* azul da rede */
  --lilas-neon:#7A5EA8;      /* roxo da rede */
  --magenta-vivo:#C5204B;    /* framboesa, cor primária */
  --magenta-profundo:#9E1739;
  --amarelo-neon:#EDB92E;    /* ouro */
  --ciano-vivo:#2F8FA6;      /* azul petróleo da rede */
  --verde-vivo:#2F8FA6;
  --laranja-rede:#E2703A;
  --off-white:#F4EFE7;       /* creme algodão */

  --serif:"Vale Sans",Helvetica,Arial,sans-serif;
  --mono:"Vale Sans",Helvetica,Arial,sans-serif;

  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;
  --r-pill:999px;
}

/* ===================== CLARO (primário) ===================== */
html[data-mode="claro"]{
  --bg:#E8E6E4;
  --canvas:#F4F3F2;
  --surface:#FFFFFF;
  --surface-2:#FAFAF9;
  --surface-sunk:#EDEBEA;
  --chat-fundo:#EBE9E7;
  --chat-bolha:#FFFFFF;
  --ink:#241016;
  --ink-2:#43242B;
  --body:#57494C;
  --body-soft:#867A7D;
  --rule:rgba(36,16,22,0.13);
  --rule-soft:rgba(36,16,22,0.07);
  --shadow:0 1px 2px rgba(36,16,22,0.05), 0 6px 22px rgba(36,16,22,0.07);
  --shadow-lg:0 18px 50px rgba(36,16,22,0.18);
  --primary:#C5204B;
  --primary-ink:#FFFFFF;
  --topbar:#A9163F;
  --topbar-ink:#FFF8F0;
  --amarelo-ink:#EDB92E;
  --logo-day:block;
  --logo-night:none;
  --tint-strength:1;
}

/* ===================== ESCURO ===================== */
html[data-mode="escuro"]{
  --bg:#190A0F;
  --canvas:#221016;
  --surface:#2D171E;
  --surface-2:#361C24;
  --surface-sunk:#1D0C11;
  --chat-fundo:#1B0A10;
  --chat-bolha:#33191F;
  --ink:#F7F1EA;
  --ink-2:#EBDFD6;
  --body:#D3C2BC;
  --body-soft:#A08A8F;
  --rule:rgba(247,241,234,0.15);
  --rule-soft:rgba(247,241,234,0.08);
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 26px rgba(0,0,0,0.35);
  --shadow-lg:0 22px 60px rgba(0,0,0,0.55);
  --primary:#E4547B;
  --primary-ink:#25070F;
  --topbar:#1C0A10;
  --topbar-ink:#F7F1EA;
  --amarelo-ink:#EDB92E;
  --logo-day:none;
  --logo-night:block;
  --tint-strength:1.15;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--mono);
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}

/* type tags por tipo de publicação */
:root{
  --t-interna:var(--azul-eletrico);
  --t-comunidade:var(--magenta-vivo);
  --t-execucao:var(--laranja-rede);
}

/* ============================================================
   COMPONENTES BASE
   ============================================================ */

.rl-card{
  background:var(--surface);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}

/* títulos */
.h-xxl{font-family:var(--serif);font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--ink);}
.h-xl{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;line-height:1.02;color:var(--ink);}
.h-lg{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.05;color:var(--ink);}
.h-md{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--primary);
  display:inline-flex;align-items:center;gap:8px;
}
.mono-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--body-soft);}

/* botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;
  padding:11px 18px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  min-height:44px;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 6px 18px -6px var(--primary);}
.btn-primary:hover{box-shadow:0 10px 26px -8px var(--primary);}
.btn-ghost{background:transparent;border-color:var(--rule);color:var(--ink);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn-soft{background:var(--surface-sunk);color:var(--ink);}
.btn-soft:hover{background:var(--rule-soft);}
.btn-magenta{background:var(--magenta-vivo);color:#fff;box-shadow:0 6px 18px -6px var(--magenta-vivo);}
.btn-sm{padding:7px 13px;min-height:34px;font-size:11px;}
.btn-icon{padding:0;width:44px;height:44px;border-radius:var(--r-pill);}

/* chips / tags */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);
  line-height:1.4;white-space:nowrap;
}
.tag .tdot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.tag-interna{color:var(--azul-eletrico);background:color-mix(in srgb,var(--azul-eletrico) 14%, transparent);}
.tag-comunidade{color:var(--magenta-vivo);background:color-mix(in srgb,var(--magenta-vivo) 14%, transparent);}
.tag-execucao{color:#B85520;background:color-mix(in srgb,var(--laranja-rede) 20%, transparent);}
html[data-mode="escuro"] .tag-execucao{color:var(--laranja-rede);}

/* avatar */
.avatar{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:800;font-size:17px;color:#fff;
  letter-spacing:-.02em;overflow:hidden;
}
.avatar-sm{width:34px;height:34px;border-radius:11px;font-size:13px;}
.avatar-lg{width:60px;height:60px;border-radius:18px;font-size:23px;}

/* badge / conquista */
.badge-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 8px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--lilas-neon) 14%, transparent);
  border:1px solid color-mix(in srgb,var(--lilas-neon) 30%, transparent);
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--lilas-neon);
}
html[data-mode="claro"] .badge-chip{color:#5E4488;}
.badge-chip .bico{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:var(--lilas-neon);color:#fff;display:flex;align-items:center;justify-content:center;
}

/* divider */
.divider{height:1px;background:var(--rule);border:none;margin:0;}
.divider-dash{height:1px;background:none;border:none;border-top:1px dashed var(--rule);}

/* state pills */
.state{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;}
.state .sdot{width:6px;height:6px;border-radius:50%;}
.state-ok{color:#22697A;background:color-mix(in srgb,var(--verde-vivo) 18%,transparent);}
.state-ok .sdot{background:var(--verde-vivo);}
.state-wait{color:#8A6410;background:color-mix(in srgb,var(--amarelo-neon) 30%,transparent);}
.state-wait .sdot{background:#C79A16;}
.state-late{color:var(--magenta-vivo);background:color-mix(in srgb,var(--magenta-vivo) 14%,transparent);}
.state-late .sdot{background:var(--magenta-vivo);}
.state-info{color:var(--azul-eletrico);background:color-mix(in srgb,var(--azul-eletrico) 14%,transparent);}
.state-info .sdot{background:var(--azul-eletrico);}
html[data-mode="escuro"] .state-ok{color:var(--verde-vivo);}
html[data-mode="escuro"] .state-wait{color:var(--amarelo-neon);}

/* scrollbars (desktop) */
.scroll::-webkit-scrollbar{width:10px;height:10px;}
.scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
.scroll::-webkit-scrollbar-track{background:transparent;}

/* utility */
.row{display:flex;align-items:center;}
.col{display:flex;flex-direction:column;}
.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}.gap-5{gap:20px;}
.between{justify-content:space-between;}
.center{align-items:center;justify-content:center;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;}
.muted{color:var(--body-soft);}
.fade-in{animation:rlFade .4s ease both;}
@keyframes rlFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes rlPop{from{opacity:0;transform:scale(.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}