:root {
  /* Base background & surfaces */
  --bg-main: #0f1115;
  --bg-card: #1a1d24;
  --bg-input: #12151b;

  /* Text colors */
  --text-primary: #f5f7fa;
  --text-secondary: #a9b0bb;
  --text-muted: #6f7782;

  /* Borders */
  --border-subtle: #2a2f3a;
  --border-focus: #ff1493; /* deeppink */

  /* Brand colors */
  --color-primary: #ff1493; /* deeppink */
  --color-primary-hover: #e01283;
  --color-primary-active: #c01074;

  --color-accent: #ffef57; /* canary yellow */
  --color-accent-soft: rgba(255, 239, 87, 0.15);

  /* States */
  --color-success: #4ade80;
  --color-error: #f87171;

  /* Button text */
  --button-text: #ffffff;
}

/* Example usage */

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
}

.container {
  background-color: var(--bg-card);
  border: 0;
  border-radius: 1em;
  padding: 1.5rem;
  box-shadow: none;
}
.logo {
  text-align: center;
}
.header {
  border-bottom: 1px solid #333333;
}

h2 {
  font-weight: 400;
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 16pt;
}

input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary);
  padding: 1rem 1.5rem !important;
  border-radius: 2rem !important;
  box-shadow: none !important;
}

input:focus {
  border-color: var(--border-focus);
  outline: none;
}

label {
  color: var(--color-accent);
}

p label {
  padding: 0rem 0.5rem;
  line-height: 2rem;
}

.lists .description {
  margin: 10px 15px 0 25px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #eee;
}

/* Button */
.button {
  background-color: var(--color-primary);
  color: var(--button-text);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 2rem;
  cursor: pointer;

  margin: 2rem auto;
  display: block;
}

.button:hover {
  background-color: var(--color-primary-hover);
}

.button:active {
  background-color: var(--color-primary-active);
}

/* Accent usage */
a,
.highlight {
  color: var(--color-accent);
}

.right a {
  color: var(--color-accent);
  text-decoration-color: indianred;
  text-decoration-line: none;
  border: 3px dotted deeppink;
  border-width: 0 0 3px 0;
}

small,
.helper-text {
  color: var(--text-secondary);
}

footer {
  display: none;
}

/*
:root {
  color-scheme: light dark;
  --bg-color: #111111;
  --text-color: #EEEEEE;
  --form-bg-color: #1E1E1E;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.header {
  border-bottom: 1px solid #666666;
}

.container {
  background-color: var(--form-bg-color);
}

.wrap {
  border-radius: 2em;
}

footer {
  display: none;
}
*/