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

:root{
  --sea-deep: #A9744A;
  --sea: #C9975E;
  --sea-light: #E4C48F;
  --sand: #FFFFFF;
  --sand-deep: #ECECEC;
  --sun: #FFCD00;
  --sun-soft: #FFE066;
  --ink: #333333;
  --ink-dim: #666666;
  --white: #FFFFFF;
  --danger: #D64545;
  --serif: 'Jost', -apple-system, sans-serif;
  --sans: 'Jost', -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  min-height: 100vh;
}

a{ color: inherit; }

/* ---------------- buttons / inputs (shared) ---------------- */
button{ font-family: var(--sans); cursor:pointer; }
.btn{
  border: 1.5px solid var(--sea-deep);
  background: var(--white);
  color: var(--sea-deep);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.btn:hover{ background: var(--sea-deep); color: var(--white); }
.btn-primary{
  background: var(--sea-deep); color: var(--white); border-color: var(--sea-deep);
}
.btn-primary:hover{ background: var(--sea); border-color: var(--sea); }
.btn-sun{
  background: var(--sun); color: #2A1B02; border-color: var(--sun);
}
.btn-sun:hover{ background: var(--sun-soft); border-color: var(--sun-soft); }
.btn-ghost{
  background: transparent; border-color: transparent; color: var(--ink-dim);
}
.btn-ghost:hover{ background: rgba(15,82,87,0.08); color: var(--ink); }
.btn-danger{ color: var(--danger); border-color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color: var(--white); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn:disabled:hover{ background: var(--white); color: var(--sea-deep); }

input[type=text], input[type=password], input[type=date], textarea{
  font-family: var(--sans);
  width: 100%;
  border: 1.5px solid var(--sand-deep);
  background: var(--white);
  color: var(--ink);
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 14.5px;
}
input:focus, textarea:focus{ outline: none; border-color: var(--sea); }
textarea{ resize: vertical; min-height: 100px; line-height:1.5; font-family: var(--sans); }

.error-text{ color: var(--danger); font-size: 13.5px; margin-top: 6px; min-height: 1.2em; }

::selection{ background: var(--sun-soft); }