@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   NAPEL DESIGN SYSTEM — tokens DaisyUI overrides (HSL)
   ============================================================ */
:root,
[data-theme="docuseal"] {
  --p: 207 81% 21%;     --pc: 0 0% 100%;  --pf: 207 81% 17%;
  --s: 207 56% 65%;     --sc: 207 81% 12%; --sf: 207 56% 55%;
  --a: 210 61% 47%;     --ac: 0 0% 100%;   --af: 210 61% 40%;
  --n: 205 87% 13%;     --nc: 0 0% 100%;   --nf: 205 87% 10%;
  --b1: 0 0% 100%;
  --b2: 207 53% 97%;
  --b3: 205 41% 92%;
  --bc: 207 62% 12%;
  --in: 207 81% 35%;    --inc: 0 0% 100%;
  --su: 158 64% 40%;    --suc: 0 0% 100%;
  --wa: 38 92% 50%;     --wac: 0 0% 100%;
  --er: 0 84% 60%;      --erc: 0 0% 100%;
  --rounded-box: 1rem;
  --rounded-btn: 0.625rem;
  --rounded-badge: 0.5rem;
  --tab-radius: 0.5rem;
  --tab-border: 2px;
  --animation-btn: 0.18s;
  --animation-input: 0.18s;
  --btn-text-case: none;
  --border-btn: 1px;
  /* Napel raw tokens */
  --napel-navy-950: #06283d;
  --napel-navy-900: #082E49;
  --napel-navy: #0A3C5F;
  --napel-sky: #74A9D7;
  --napel-sky-700: #2f7cbf;
  --napel-sky-bg: #EAF3FB;
  --napel-ink: #0c2433;
  --napel-bg: #F4F8FB;
  --napel-border: #E8EFF4;
  --napel-border-strong: #D6E4EE;
  --napel-shadow: 0 1px 2px rgba(8,46,73,.05), 0 10px 26px -14px rgba(8,46,73,.22);
  --napel-shadow-lg: 0 24px 60px -22px rgba(8,46,73,.30);
  --napel-ease: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   TIPOGRAFIA + FUNDO MESH
   ============================================================ */
html {
  background: var(--napel-bg) !important;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  color: var(--napel-ink) !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(116,169,215,.22), transparent 42%),
    radial-gradient(circle at 86% 6%, rgba(47,124,191,.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(116,169,215,.10), transparent 50%),
    var(--napel-bg) !important;
  background-attachment: fixed !important;
  position: relative;
  min-height: 100vh;
}

/* Dot-grid sutil — z-index -1 fica atrás de tudo sem precisar bagunçar filhos do body */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(116,169,215,.18) 1.1px, transparent 1.1px);
  background-size: 24px 24px;
  opacity: 0.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--napel-navy-950);
}

.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }

.napel-h1 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  text-align: center !important;
  background: linear-gradient(110deg, var(--napel-navy-950) 0%, var(--napel-navy) 45%, var(--napel-sky-700) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: block !important;
  margin: 0.25rem auto 0 !important;
}

.napel-eyebrow {
  display: block !important;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--napel-sky-700);
  background: var(--napel-sky-bg);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(116,169,215,.4);
  margin: 36px auto 14px !important;
  text-align: center;
}

.label, label {
  font-weight: 600;
  color: var(--napel-ink);
  letter-spacing: -0.01em;
}

.font-mono, code, pre, kbd { font-feature-settings: "tnum"; }

/* ============================================================
   NAVBAR — wordmark "Assinatura"
   ============================================================ */
.napel-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.napel-brand-text {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--napel-navy);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn, .base-button {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  transition: transform .18s var(--napel-ease), box-shadow .18s var(--napel-ease), background-color .18s var(--napel-ease);
}

.base-button,
.btn-primary,
.btn-neutral {
  background: var(--napel-navy);
  color: #fff;
  border: 1px solid var(--napel-navy);
  box-shadow: 0 1px 2px rgba(8,46,73,.12), 0 8px 20px -10px rgba(10,60,95,.50);
}

.base-button:hover,
.btn-primary:hover,
.btn-neutral:hover {
  background: var(--napel-navy-900);
  border-color: var(--napel-navy-900);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(8,46,73,.18), 0 12px 28px -10px rgba(10,60,95,.65);
}

.btn-outline {
  background: transparent;
  color: var(--napel-navy);
  border: 1.5px solid var(--napel-border-strong);
}
.btn-outline:hover {
  background: var(--napel-sky-bg);
  border-color: var(--napel-sky);
  color: var(--napel-navy);
}

.btn:focus-visible,
.base-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(116,169,215,.32);
}

/* ============================================================
   INPUTS
   ============================================================ */
.input, .textarea, .select, .base-input, .base-select {
  border: 1.5px solid var(--napel-border-strong);
  background: #fff;
  transition: border-color .18s var(--napel-ease), box-shadow .18s var(--napel-ease);
}

.input:focus, .input:focus-visible,
.textarea:focus, .select:focus,
.base-input:focus, .base-select:focus,
.checkbox:focus-visible {
  outline: none;
  border-color: var(--napel-navy);
  box-shadow: 0 0 0 4px rgba(116,169,215,.28);
}

.input:hover, .base-input:hover {
  border-color: var(--napel-sky);
}

/* ============================================================
   CARDS / SOMBRAS
   ============================================================ */
.card, .bg-base-100.border, .shadow-md {
  background: #fff;
  border: 1px solid var(--napel-border);
  border-radius: var(--rounded-box);
  box-shadow: var(--napel-shadow);
}

.shadow-lg {
  box-shadow: var(--napel-shadow-lg);
}

/* Form container do setup: enquadrar em card (escopado pra napel-setup-card) */
.napel-setup-card {
  background: #fff !important;
  border: 1px solid var(--napel-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--napel-shadow-lg) !important;
  padding: 44px 40px !important;
  margin-top: 32px !important;
  margin-bottom: 48px !important;
  position: relative !important;
  overflow: hidden !important;
}

.napel-setup-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--napel-navy) 0%, var(--napel-sky-700) 50%, var(--napel-sky) 100%);
  z-index: 2;
}

/* ============================================================
   BADGES / MISC
   ============================================================ */
.badge { font-weight: 600; letter-spacing: 0; }

a { transition: color 0.18s var(--napel-ease); }

table tbody tr:hover { background-color: var(--napel-sky-bg); }

::selection {
  background: rgba(116,169,215,.45);
  color: var(--napel-navy-950);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--napel-sky-bg); }
::-webkit-scrollbar-thumb {
  background: var(--napel-border-strong);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--napel-sky); }

/* ============================================================
   ESCONDER QUALQUER LINK RESIDUAL GITHUB/DOCUSEAL.COM
   ============================================================ */
a[href*="github.com"],
a[href*="docuseal.com"],
a[href*="docuseal.tech"],
a[href*="docusealco"] {
  display: none !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}