/* Design system co.crie — base compartilhada pelas ferramentas.
   Cada app linka este arquivo e só adiciona o que é dele. */
:root {
  /* Marca co.crie */
  --navy: #16243F;
  --navy-soft: #1C2B47;
  --text-muted: #51617D;
  --orange-light: #F7A85E;
  --orange: #EE6A33;
  --orange-deep: #E76234;
  --orange-vivid: #E8512A;

  --surface: #FFFFFF;
  --border: rgba(22, 36, 63, .12);

  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-card: 0 24px 60px -18px rgba(22, 36, 63, .28);
  --transition: 200ms cubic-bezier(.4, 0, .2, 1);

  --grad-orange: linear-gradient(135deg, var(--orange-light) 0%, var(--orange-deep) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--navy);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
  background:
    radial-gradient(820px 520px at 8% -8%, rgba(247, 168, 94, .38), transparent 58%),
    radial-gradient(820px 620px at 102% 110%, rgba(232, 81, 42, .22), transparent 56%),
    linear-gradient(180deg, #FFF9F4 0%, #FCEFE6 100%);
  background-attachment: fixed;
}

/* Cabeçalho / marca */
.brand {
  text-align: center;
  max-width: 36ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.brand img {
  width: 150px;
  height: auto;
  display: block;
  margin-bottom: 12px;
}

.brand h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.brand p {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Cartão */
.card {
  position: relative;
  width: 100%;
  max-width: 430px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface);
  border: 1px solid rgba(22, 36, 63, .07);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px rgba(22, 36, 63, .04),
    0 18px 48px -20px rgba(22, 36, 63, .26);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
}

input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: #FFFDFB;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input::placeholder,
textarea::placeholder { color: #9AA6BB; }

input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(238, 106, 51, .25);
}


/* Botão CTA — gradiente laranja da marca */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--navy);
  background: var(--grad-orange);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  box-shadow: 0 12px 24px -8px rgba(231, 98, 52, .55);
}

.btn svg { width: 20px; height: 20px; }

.btn:hover:not(:disabled) { transform: translateY(-1px); filter: saturate(1.08) brightness(1.02); box-shadow: 0 16px 30px -8px rgba(231, 98, 52, .6); }
.btn:active:not(:disabled) { transform: translateY(0); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 36, 63, .25), 0 12px 24px -8px rgba(231, 98, 52, .55);
}

.btn:disabled {
  background: #EDEFF3;
  color: #A6AFBF;
  cursor: not-allowed;
  box-shadow: none;
}

footer {
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-orange);
  display: inline-block;
}


/* Botão secundário */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(22, 36, 63, .06);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.btn-ghost svg { width: 16px; height: 16px; }
.btn-ghost:hover:not(:disabled) { background: rgba(238, 106, 51, .14); color: var(--orange-vivid); }
.btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(238, 106, 51, .30); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

.hint { font-size: .875rem; line-height: 1.5; color: var(--text-muted); }
.hint a { color: var(--navy); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 3px; }

textarea:disabled, input:disabled { opacity: .6; }

[hidden] { display: none !important; }

@media (max-width: 400px) {
  .card { padding: 24px 20px; }
  .brand img { width: 144px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover:not(:disabled) { transform: none; }
}