/* ============================================================
   DISC ONE — Foundation (tema CLARO / nova identidade)
   Paleta de pétalas (verde→azul) + ardósia. Poppins + Inter.
   Mantém os MESMOS nomes de classe/variáveis das etapas
   anteriores, então as telas herdam o novo visual.
   ============================================================ */

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

:root {
  /* ---- Marca (azul) ---- */
  --brand-50:  #EAF2FB;
  --brand-100: #D6E6F6;
  --brand-200: #B4D0EC;
  --brand-300: #84B0DC;
  --brand-400: #4F8BC8;
  --brand-500: #2E73B8;   /* primária */
  --brand-600: #28598F;   /* hover */
  --brand-700: #1F4677;
  --brand-800: #173458;
  --brand-900: #0F2238;

  /* ---- Dimensões DISC (pétalas) ---- */
  --disc-d: #2F66A8;      /* azul-profundo */
  --disc-i: #18A878;      /* verde */
  --disc-s: #6E9BD0;      /* azul-claro */
  --disc-c: #4FA3C4;      /* ciano */
  --disc-d-soft: rgba(47,102,168,0.10);
  --disc-i-soft: rgba(24,168,120,0.10);
  --disc-s-soft: rgba(110,155,208,0.12);
  --disc-c-soft: rgba(79,163,196,0.12);

  /* ---- Texto / ardósia ---- */
  --fg-1: #2A323D;        /* títulos */
  --fg-2: #3D4654;        /* ardósia do logo / texto forte */
  --fg-3: #56606E;        /* corpo */
  --fg-4: #8893A2;        /* apoio / placeholder */
  --fg-on-brand: #FFFFFF;

  /* ---- Superfícies ---- */
  --bg-0: #F4F7FB;        /* fundo da página */
  --bg-1: #FFFFFF;        /* cards */
  --bg-2: #FFFFFF;
  --bg-3: #F6F8FB;        /* inputs / preenchimentos sutis */
  --bg-4: #EEF2F7;        /* preenchimento um pouco mais marcado */
  --line-1: #E6EBF1;      /* borda sutil */
  --line-2: #DCE3EC;      /* borda de input */
  --line-3: #C7D2DF;

  /* ---- Estados ---- */
  --success: #18A878;
  --success-soft: rgba(24,168,120,0.12);
  --danger: #E0556A;
  --danger-soft: rgba(224,85,106,0.12);
  --warning: #E0A23C;
  --info: #2E73B8;
  --info-soft: rgba(46,115,184,0.12);

  /* ---- Raio ---- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Espaçamento ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px;
  --s-10: 96px;

  /* ---- Tipografia ---- */
  --font-display: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(135deg, #2E73B8 0%, #18A878 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(46,115,184,0.10), rgba(24,168,120,0.10));
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
  --grad-petal: linear-gradient(135deg, #18A878 0%, #4FA3C4 45%, #2F66A8 100%);
  --grad-vignette: radial-gradient(1100px 460px at 50% -12%, rgba(46,115,184,0.07), transparent 70%);

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(40,60,90,0.06);
  --shadow-md: 0 10px 28px -10px rgba(40,60,90,0.16);
  --shadow-lg: 0 24px 60px -18px rgba(40,60,90,0.22);
  --glow-soft: 0 0 0 4px rgba(46,115,184,0.14);
  --glow-brand: 0 10px 30px -10px rgba(46,115,184,0.45);
  --shadow-inset: inset 0 1px 2px rgba(40,60,90,0.06);

  /* ---- Timing ---- */
  --dur: 0.22s;
  --dur-fast: 0.14s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-0);
  background-image: var(--grad-vignette);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg-3);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--brand-500); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-600); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p  { color: var(--fg-3); }
strong, b { color: inherit; font-weight: 600; }

::selection { background: rgba(46,115,184,0.18); color: var(--fg-1); }

/* ---- Container ---- */
.container { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--s-5); }
.container-narrow { max-width: 820px; }

/* ============================================================
   Marca / logo
   ============================================================ */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
.brand-mark img { width: 38px; height: 38px; object-fit: contain; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  line-height: 1;
}
.brand-word b { font-weight: 800; color: var(--fg-2); }
.brand-lockup.is-sm .brand-mark,
.brand-lockup.is-sm .brand-mark img { width: 30px; height: 30px; }
.brand-lockup.is-sm .brand-word { font-size: 1.02rem; }

/* ============================================================
   Eyebrow / mono / pill / badges
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.mono { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0.02em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  color: var(--fg-3);
  font-size: 0.78rem;
  font-weight: 500;
}
.pill.is-brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }

/* Pontos das dimensões */
.disc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-d { background: var(--disc-d); }
.dot-i { background: var(--disc-i); }
.dot-s { background: var(--disc-s); }
.dot-c { background: var(--disc-c); }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  --_bg: var(--bg-1);
  --_fg: var(--fg-1);
  --_bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--glow-soft); }

.btn-primary {
  --_bg: var(--brand-500);
  --_fg: var(--fg-on-brand);
  --_bd: transparent;
  background-image: var(--grad-brand);
  box-shadow: 0 8px 20px -8px rgba(46,115,184,0.55);
}
.btn-primary:hover { box-shadow: 0 12px 26px -8px rgba(46,115,184,0.6); }

.btn-secondary { --_bg: var(--bg-1); --_fg: var(--brand-700); --_bd: var(--brand-200); }
.btn-secondary:hover { background: var(--brand-50); border-color: var(--brand-300); }

.btn-ghost { --_bg: transparent; --_fg: var(--fg-2); --_bd: var(--line-2); }
.btn-ghost:hover { background: var(--bg-3); }

.btn-lg { padding: 15px 28px; font-size: 1.02rem; border-radius: var(--r-lg); }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-6);
}
.card-flat { box-shadow: none; }
.card-pad-lg { padding: var(--s-7); }

/* ============================================================
   Formulários (base — auth.css complementa)
   ============================================================ */
label { font-size: 0.86rem; font-weight: 600; color: var(--fg-2); font-family: var(--font-display); }
input, select, textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--fg-1);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--fg-4); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--glow-soft);
}

/* ============================================================
   Utilitários
   ============================================================ */
.text-muted { color: var(--fg-4); }
.text-brand { color: var(--brand-600); }
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.hidden { display: none; }

/* ============================================================
   Animações  (mantém os nomes usados nas views)
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(46,115,184,0.0); } 50% { box-shadow: 0 0 26px -4px rgba(46,115,184,0.4); } }

.animate-fadeUp  { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.animate-fadeIn  { animation: fadeIn var(--dur-slow) var(--ease-out) both; }
.animate-scaleIn { animation: scaleIn var(--dur-slow) var(--ease-out) both; }
.route-fade { animation: fadeIn 320ms var(--ease-out) both; }

/* aliases extras (caso usados) */
.anim-fade-up { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.anim-fade-in { animation: fadeIn var(--dur-slow) var(--ease-out) both; }
.anim-scale-in { animation: scaleIn var(--dur-slow) var(--ease-out) both; }

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