:root {
  color-scheme:
    light;

  --page:
    #f4f4f1;

  --surface:
    #ffffff;

  --surface-soft:
    #ecece8;

  --text:
    #0a0a0a;

  --text-soft:
    #666661;

  --line:
    rgba(0, 0, 0, 0.12);

  --line-dark:
    rgba(0, 0, 0, 0.22);

  --black:
    #050505;

  --white:
    #ffffff;

  --danger:
    #a32b2b;

  --radius:
    16px;

  --shell:
    1240px;
}

* {
  box-sizing:
    border-box;
}

html {
  scroll-behavior:
    smooth;
}

body {
  margin:
    0;

  background:
    var(--page);

  color:
    var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}

button,
input {
  font:
    inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

a {
  color:
    inherit;

  text-decoration:
    none;
}

button {
  cursor:
    pointer;
}

button:disabled {
  cursor:
    default;

  opacity:
    0.55;
}

.shell {
  width:
    min(
      calc(100% - 40px),
      var(--shell)
    );

  margin:
    0 auto;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
  height:
    74px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(244, 244, 241, 0.92);

  backdrop-filter:
    blur(18px);

  position:
    sticky;

  top:
    0;

  z-index:
    30;
}

.site-header .shell {
  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}

.brand {
  font-size:
    21px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -0.05em;
}

.nav {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  font-size:
    14px;

  font-weight:
    600;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn {
  min-height:
    42px;

  padding:
    0 18px;

  border:
    1px solid var(--line-dark);

  border-radius:
    999px;

  background:
    transparent;

  color:
    var(--text);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-weight:
    700;
}

.btn:hover:not(:disabled) {
  border-color:
    var(--black);
}

.btn.primary {
  background:
    var(--black);

  border-color:
    var(--black);

  color:
    var(--white);
}

.btn.danger {
  color:
    var(--danger);

  border-color:
    rgba(163, 43, 43, 0.3);
}


/* ---------------------------------------------------------
   SHARED CARD / STATUS
   --------------------------------------------------------- */

.card {
  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    var(--surface);
}

.form-status {
  min-height:
    24px;

  margin:
    10px 0;

  color:
    var(--text-soft);

  font-size:
    13px;
}

.form-status.error {
  color:
    var(--danger);
}

.form-status.success {
  color:
    var(--text);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (
  max-width: 850px
) {
  .nav-hide-mobile {
    display:
      none;
  }
}

@media (
  max-width: 540px
) {
  .nav {
    gap:
      13px;
  }
}