:root {
  --neeko-black: #101010;
  --neeko-ink: #222222;
  --neeko-muted: #6f6f6f;
  --neeko-line: #dddddd;
  --neeko-soft: #f4f4f2;
  --neeko-white: #ffffff;
}

html,
body,
button,
input,
.mat-toolbar,
.mat-list-item,
.mat-form-field {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  color: var(--neeko-ink);
  background: var(--neeko-soft);
}

mat-toolbar.mat-toolbar {
  min-height: 72px;
  padding: 0 32px;
  color: var(--neeko-white) !important;
  background: var(--neeko-black) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
}

.header--logo {
  width: 116px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain;
  content: url("neeko-horizontal.png");
  filter: invert(1);
}

mat-toolbar .mat-list-item,
mat-toolbar .mat-list-item-content,
mat-toolbar .header__actions {
  color: var(--neeko-white) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.main {
  background:
    radial-gradient(circle at 50% 4%, rgba(0, 0, 0, 0.04), transparent 30%),
    var(--neeko-soft) !important;
}

.wrapper {
  padding-top: 54px;
}

.form_wrapper {
  padding: 34px 42px 38px;
  border: 1px solid var(--neeko-line);
  border-radius: 18px;
  background: var(--neeko-white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

.heading {
  color: var(--neeko-black) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
}

.pinkText,
.subHeading {
  color: var(--neeko-ink) !important;
}

.mat-form-field.mat-focused .mat-form-field-ripple,
.mat-form-field-ripple {
  background-color: var(--neeko-black) !important;
}

.btn_axn-pri.mat-raised-button {
  min-height: 48px;
  border-radius: 8px;
  color: var(--neeko-white) !important;
  background: var(--neeko-black) !important;
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn_axn-pri.mat-raised-button[disabled] {
  color: #8c8c8c !important;
  background: #e2e2e2 !important;
}

.main-footer {
  color: var(--neeko-muted);
  background: transparent !important;
}

.main-footer img[alt="MOSIP logo"] {
  width: 46px;
  height: 46px !important;
  object-fit: contain;
  content: url("neeko-symbol.png");
}

.main-footer .version-txt {
  display: none;
}

@media (max-width: 720px) {
  mat-toolbar.mat-toolbar {
    min-height: 64px;
    padding: 0 16px;
  }

  .form_wrapper {
    margin: 16px;
    padding: 28px 22px 32px;
  }
}