/* ============================================================
   HUB MULTICANAL — DESIGN TOKENS
   ============================================================ */
:root{
  /* Cor — Base */
  --ink:        #0F1729;
  --ink-soft:   #17223B;
  --ink-line:   #26314C;
  --canvas:     #F5F6FA;
  --surface:    #FFFFFF;

  /* Cor — Texto */
  --slate-900:  #171E2E;
  --slate-700:  #3B4358;
  --slate-500:  #6B7385;
  --slate-300:  #B7BDCC;
  --line:       #E3E6EE;
  --line-soft:  #EEF0F5;

  /* Cor — Sinal (marca / ação primária) */
  --signal:     #2C4BF2;
  --signal-600: #1E37C4;
  --signal-100: #E8ECFF;

  /* Cor — Semântica de status operacional */
  --success:     #1B9E72;
  --success-100: #E1F6EE;
  --amber:       #C97A1B;
  --amber-100:   #FBEDDA;
  --danger:      #D8434B;
  --danger-100:  #FCEAEB;
  --info:        #2C6FF2;
  --info-100:    #E9F1FF;

  /* Marketplaces — referência (uso pontual, nunca dominante) */
  --mkt-ml:      #FFD100;
  --mkt-shopee:  #EE4D2D;
  --mkt-amazon:  #131A22;
  --mkt-magalu:  #0086FF;

  /* Espaçamento (escala 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 80px;

  /* Raio */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;

  /* Elevação */
  --shadow-1: 0 1px 2px rgba(15,23,41,.05), 0 1px 1px rgba(15,23,41,.04);
  --shadow-2: 0 6px 16px -6px rgba(15,23,41,.14), 0 2px 6px -2px rgba(15,23,41,.08);
  --shadow-3: 0 20px 45px -18px rgba(15,23,41,.28);

  /* Tipografia */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* Movimento */
  --ease-out: cubic-bezier(.16,.8,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  font-family: var(--font-body);
  color: var(--slate-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
}
::selection{ background: var(--signal-100); color: var(--signal-600); }

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); letter-spacing: -0.01em; }
code, .font-mono{ font-family: var(--font-mono); }

a{ color: var(--signal); text-decoration: none; }
:focus-visible{
  outline: 2.5px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout shell ---------- */
.ds-topbar{
  position: fixed; inset: 0 0 auto 0; height: 64px; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-6);
}
.ds-mark{
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: linear-gradient(155deg, var(--signal), #6B7CFF);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 15px;
  flex: none;
}
.ds-topbar .brand-name{ color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ds-topbar .brand-sub{ color: var(--slate-300); font-size: 12.5px; }
.ds-search{
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,.06); border: 1px solid var(--ink-line);
  border-radius: var(--r-md); padding: 8px 14px; color: var(--slate-300); font-size: 13.5px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.ds-search:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.09); }
.ds-topbar-right{ margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }

.bell-btn{
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--slate-300);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bell-btn:hover{ background: rgba(255,255,255,.08); color: #fff; }
.bell-btn:active{ transform: scale(.94); }
.bell-btn .badge-count{
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink);
}
.bell-btn .badge-count::after{
  content:""; position:absolute; inset:-2px; border-radius:999px;
  border: 1.5px solid var(--danger); opacity:.6; animation: pulse-ring 2.2s var(--ease-in-out) infinite;
}
.avatar-chip{
  width: 34px; height: 34px; border-radius: 50%; background: var(--signal-100);
  color: var(--signal-600); font-family: var(--font-display); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12);
}

.ds-sidebar{
  position: fixed; top: 64px; bottom: 0; left: 0; width: 244px; z-index: 30;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-4); overflow-y: auto;
}
.ds-sidebar .eyebrow{
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-500); padding: 0 var(--sp-3); margin: var(--sp-6) 0 var(--sp-2);
}
.ds-sidebar .eyebrow:first-child{ margin-top: 0; }
.ds-nav-link{
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--slate-700); font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.ds-nav-link:hover{ background: var(--canvas); color: var(--slate-900); padding-left: 16px; }
.ds-nav-link.active{ background: var(--signal-100); color: var(--signal-600); font-weight: 600; }
.ds-nav-link .dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }

.ds-main{ margin-left: 244px; padding-top: 64px; }
.ds-section{ padding: var(--sp-9) var(--sp-8); max-width: 1180px; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 88px; }
.ds-section:last-of-type{ border-bottom: none; }
.section-kicker{
  font-family: var(--font-mono); font-size: 12px; color: var(--signal); letter-spacing: .04em;
  display:flex; align-items:center; gap:8px; margin-bottom: var(--sp-2);
}
.section-kicker::before{ content:""; width:16px; height:1.5px; background: var(--signal); }
.section-title{ font-size: 27px; font-weight: 600; margin-bottom: var(--sp-3); }
.section-desc{ color: var(--slate-500); max-width: 62ch; margin-bottom: var(--sp-7); font-size: 14.5px; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.hero{
  margin-left: 244px; padding-top: 128px; padding-bottom: var(--sp-9);
  padding-left: var(--sp-8); padding-right: var(--sp-8);
  background:
    radial-gradient(1100px 420px at 82% -10%, rgba(44,75,242,.10), transparent 60%),
    var(--canvas);
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: 12px;
  color: var(--signal-600); background: var(--signal-100); padding: 6px 12px; border-radius: 999px; margin-bottom: var(--sp-5);
}
.hero h1{ font-size: 42px; line-height: 1.12; font-weight: 700; margin-bottom: var(--sp-5); letter-spacing: -0.02em; }
.hero h1 em{ font-style: normal; color: var(--signal); }
.hero p.lead{ color: var(--slate-700); font-size: 16px; max-width: 46ch; margin-bottom: var(--sp-7); }
.hero-stats{ display:flex; gap: var(--sp-7); }
.hero-stat b{ display:block; font-family: var(--font-display); font-size: 22px; }
.hero-stat span{ color: var(--slate-500); font-size: 12.5px; }

/* signature: signal map */
.signal-map{ position: relative; height: 340px; }
.signal-map svg{ width: 100%; height: 100%; overflow: visible; }
.sm-line{ fill:none; stroke: var(--signal); stroke-width: 1.6; stroke-dasharray: 5 6; opacity:.45;
  animation: dash-flow 4.5s linear infinite; }
.sm-line.d2{ animation-delay: -1.1s; } .sm-line.d3{ animation-delay: -2.2s; } .sm-line.d4{ animation-delay: -3.3s; }
@keyframes dash-flow{ to{ stroke-dashoffset: -110; } }
.sm-node{ transform-box: fill-box; transform-origin: center; }
.sm-node .ring{ fill:none; stroke-width: 1.4; opacity:.35; animation: pulse-ring 2.6s var(--ease-in-out) infinite; }
.sm-node.n2 .ring{ animation-delay: .5s; } .sm-node.n3 .ring{ animation-delay: 1s; } .sm-node.n4 .ring{ animation-delay: 1.5s; }
@keyframes pulse-ring{ 0%{ transform: scale(.85); opacity:.5; } 100%{ transform: scale(1.9); opacity:0; } }
.sm-hub{ animation: hub-breathe 3.2s var(--ease-in-out) infinite; }
@keyframes hub-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }
.sm-label{ font-family: var(--font-mono); font-size: 10.5px; fill: var(--slate-500); }

/* ---------- Cards genéricas ---------- */
.card-ds{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card-ds:hover{ box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line); }

/* ---------- Cores ---------- */
.swatch{ border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.swatch-fill{ height: 76px; }
.swatch-meta{ background: var(--surface); padding: 10px 14px; }
.swatch-meta .name{ font-size: 13px; font-weight: 600; }
.swatch-meta .hex{ font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-500); }

/* ---------- Tipografia ---------- */
.type-row{ display:flex; align-items: baseline; gap: var(--sp-6); padding: var(--sp-5) 0; border-top: 1px solid var(--line-soft); }
.type-row:first-child{ border-top:none; }
.type-meta{ width: 168px; flex: none; }
.type-meta .lbl{ font-size: 12px; font-weight: 600; color: var(--slate-700); }
.type-meta .spec{ font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); }
.type-sample{ overflow: hidden; }

/* ---------- Botões ---------- */
.btn-signal{
  background: var(--signal); border: 1px solid var(--signal); color: #fff; font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-signal:hover{ background: var(--signal-600); border-color: var(--signal-600); color:#fff; box-shadow: 0 6px 14px -6px rgba(44,75,242,.55); }
.btn-signal:active{ transform: translateY(1px) scale(.985); }

.btn-outline-ds{
  background: transparent; border: 1px solid var(--line); color: var(--slate-900); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-outline-ds:hover{ border-color: var(--signal); background: var(--signal-100); color: var(--signal-600); }

.btn-ghost-ds{
  background: transparent; border: 1px solid transparent; color: var(--slate-700); font-weight: 600; font-size: 14px;
  padding: 9px 14px; border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-ghost-ds:hover{ background: var(--canvas); }

.btn-danger-ds{
  background: var(--danger-100); border: 1px solid transparent; color: var(--danger); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease-out);
}
.btn-danger-ds:hover{ background: #F8D6D8; }

.btn-loading{ position:relative; color: transparent !important; pointer-events:none; }
.btn-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Status pills ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: var(--font-mono);
  letter-spacing: -.01em;
}
.pill-dot{ width: 7px; height: 7px; border-radius: 50%; position: relative; flex: none; }
.pill-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid currentColor; opacity:.5; }
.pill-dot.live::after{ animation: pulse-ring 1.8s var(--ease-in-out) infinite; }
.pill-success{ background: var(--success-100); color: var(--success); }
.pill-amber{ background: var(--amber-100); color: var(--amber); }
.pill-danger{ background: var(--danger-100); color: var(--danger); }
.pill-info{ background: var(--info-100); color: var(--info); }
.pill-neutral{ background: var(--line-soft); color: var(--slate-500); }

/* ---------- Forms ---------- */
.field-ds label{ font-size: 12.5px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; display:block; }
.field-ds .hint{ font-size: 11.5px; color: var(--slate-500); margin-top: 5px; }
.form-control-ds{
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 14px; background: var(--surface); color: var(--slate-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-control-ds:focus{ outline:none; border-color: var(--signal); box-shadow: 0 0 0 3.5px var(--signal-100); }
.form-control-ds.is-mono{ font-family: var(--font-mono); font-size: 13px; }

/* ---------- Alerts ---------- */
.alert-ds{
  display:flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 13.5px; align-items: flex-start;
}
.alert-ds i{ font-size: 16px; margin-top: 1px; }
.alert-amber{ background: var(--amber-100); color: #7A4E10; border-color: #F0D6A8; }
.alert-amber i{ color: var(--amber); }
.alert-info{ background: var(--info-100); color: #163C8C; border-color: #C6D8FF; }
.alert-info i{ color: var(--info); }
.alert-title{ font-weight: 700; margin-bottom: 2px; }

/* ---------- Toast demo ---------- */
.toast-ds{
  display:flex; gap: 12px; align-items:flex-start; background: var(--ink); color:#fff;
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-3); width: 340px;
  border: 1px solid var(--ink-line);
}
.toast-ds .ic{ width:30px; height:30px; border-radius: 50%; background: var(--success-100); color: var(--success);
  display:flex; align-items:center; justify-content:center; flex:none; }
.toast-ds small{ color: var(--slate-300); }

/* ---------- Tabela ---------- */
.table-ds{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table-ds thead th{
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500);
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700;
}
.table-ds tbody td{ padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--slate-700); }
.table-ds tbody tr{ transition: background var(--dur-fast) var(--ease-out); }
.table-ds tbody tr:hover{ background: var(--canvas); }
.table-ds .sku{ font-family: var(--font-mono); font-size: 12.5px; color: var(--slate-900); }

/* ---------- Marketplace connector card ---------- */
.mkt-card{ display:flex; align-items:center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.mkt-swatch{ width: 38px; height: 38px; border-radius: 9px; flex: none; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:14px; color:#fff; }

/* ---------- Empty state ---------- */
.empty-ds{ text-align:center; padding: var(--sp-9) var(--sp-6); border: 1.5px dashed var(--line); border-radius: var(--r-lg); }
.empty-ds .ic{ width:52px; height:52px; border-radius:50%; background: var(--canvas); color: var(--slate-500); display:flex; align-items:center; justify-content:center; margin: 0 auto var(--sp-4); font-size: 20px; }

/* ---------- Sino dropdown pattern ---------- */
.bell-panel{ width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow:hidden; }
.bell-panel .bp-head{ padding: 14px 16px; border-bottom: 1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; }
.bell-panel .bp-item{ display:flex; gap:12px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); transition: background var(--dur-fast) var(--ease-out); }
.bell-panel .bp-item:hover{ background: var(--canvas); }
.bell-panel .bp-item .ic{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; font-size:14px; }
.bell-panel .bp-item.unread{ background: var(--signal-100); }
.bell-panel .bp-item .t{ font-size: 13px; font-weight: 600; }
.bell-panel .bp-item .d{ font-size: 12px; color: var(--slate-500); }

/* ---------- Hover-lift demo ---------- */
.hoverlift{ transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hoverlift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }

.press{ transition: transform var(--dur-fast) var(--ease-out); }
.press:active{ transform: scale(.96); }

footer.ds-footer{ margin-left: 244px; padding: var(--sp-8); color: var(--slate-500); font-size: 12.5px; border-top: 1px solid var(--line); }

@media (max-width: 992px){
  .ds-sidebar{ display:none; }
  .ds-main, .hero, footer.ds-footer{ margin-left: 0; }
  .hero{ grid-template-columns: 1fr; padding-top: 104px; }
  .ds-section{ padding: var(--sp-7) var(--sp-5); }
}