:root{
  /* Palette */
  --color-primary-custom: #69A2B2;
  --color-secondary-custom: #BCD5DA;
  --color-accent-custom: #0097BD;
  --color-success-custom: #7AC7B7;
  --color-light-custom: #B5E9F4;

  /* Fonts / semantic */
  --color-white-custom: #ffffff;
  --color-black-custom: #333;
  --color-error-custom: #dc3545;
  --color-warning-custom: #e6b52f;

  --btn-padding: .45rem .85rem;
  --border-radius: .375rem;
  --transition-fast: 160ms ease;


  --input-border: #c8c5c0;
  --input-border-focus: #69A2B2;
  --input-border-error: #c62828;
  --input-bg: #ffffff;
  --input-text: #2b2b2b;

  /* ===== Alerts ===== */
   --alert-info-bg: #e7f3fe;
  --alert-info-text: #0b60b0;

  --alert-success-bg: #e9f6ec;
  --alert-success-text: #1b6928;

  --alert-error-bg: #fdecea;
  --alert-error-text: #c62828;

  --alert-warning-bg: #fff8e1;
  --alert-warning-text: #e6b52f;

  /* ===== Toggle Switch ===== */
  --toggle-bg-off: #c8c5c0;
  --toggle-bg-on: #69A2B2;
}

.error-message {
  display: block;
  margin: 0 !important;
  color: #c62828;
  font-size: 0.9em;
  height: 1.25rem;
  padding-top: 10px;
}
/* ---------- Buttons ---------- */
/* Generic base for custom buttons */
.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-padding);
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  text-decoration: none;
  user-select: none;
}

.background-primary{
  background: var(--color-primary-custom);

}

/* Primary */
.btn-primary-custom {
  background: var(--color-primary-custom);
  color: var(--color-white-custom);
  border-color: rgba(0,0,0,0.06);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus { transform: translateY(-1px); opacity: .95; box-shadow: 0 6px 18px rgba(13, 38, 45, 0.08); }

/* Secondary (lighter) */
.btn-secondary-custom {
  background: var(--color-secondary-custom);
  color: var(--color-black-custom);
  border-color: rgba(0,0,0,0.06);
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus { transform: translateY(-1px); opacity: .98; }

/* Accent */
.btn-accent-custom {
  background: var(--color-accent-custom);
  color: var(--color-white-custom);
  border-color: rgba(0,0,0,0.06);
}
.btn-accent-custom:hover,
.btn-accent-custom:focus { transform: translateY(-1px); opacity: .95; }

/* Success */
.btn-success-custom {
  background: var(--color-success-custom);
  color: var(--color-white-custom);
  border-color: rgba(0,0,0,0.04);
}
.btn-success-custom:hover,
.btn-success-custom:focus { transform: translateY(-1px); opacity: .97; }

/* Light (ghost / outline look) */
.btn-light-custom {
  background: transparent;
  color: var(--color-primary-custom);
  border: 1px solid var(--color-light-custom);
}
.btn-light-custom:hover,
.btn-light-custom:focus { background: var(--color-light-custom); color: var(--color-black-custom); }

/* Small & large variants */
.btn-sm-custom { padding: .25rem .5rem; font-size: .85rem; }
.btn-lg-custom { padding: .7rem 1.1rem; font-size: 1.05rem; }

/* Disabled */
.btn-custom[disabled], .btn-custom.disabled {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn-primary-light-custom {
  background: color-mix(in srgb, var(--color-primary-custom) 14%, white);
  border-color: var(--color-primary-custom);
  color: var(--color-primary-custom);
}
.btn-primary-light-custom:hover {
  background: color-mix(in srgb, var(--color-primary-custom) 22%, white);
}
.background-primary-light-custom{
background-color: #eaf2f4;
}

/* ---- SECONDARY LIGHT ---- */
.btn-secondary-light-custom {
  background: color-mix(in srgb, var(--color-secondary-custom) 14%, white);
  border-color: var(--color-secondary-custom);
  color: var(--color-secondary-custom);
}
.btn-secondary-light-custom:hover {
  background: color-mix(in srgb, var(--color-secondary-custom) 22%, white);
}

/* ---- ACCENT LIGHT ---- */
.btn-accent-light-custom {
  background: color-mix(in srgb, var(--color-accent-custom) 14%, white);
  border-color: var(--color-accent-custom);
  color: var(--color-accent-custom);
}
.btn-accent-light-custom:hover {
  background: color-mix(in srgb, var(--color-accent-custom) 22%, white);
}
.background-accent-light-custom{
  background: color-mix(in srgb, var(--color-accent-custom) 22%, white) !important;

}

/* ---- SUCCESS LIGHT ---- */
.btn-success-light-custom {
  background: color-mix(in srgb, var(--color-success-custom) 14%, white);
  border-color: var(--color-success-custom);
  color: var(--color-success-custom);
}
.btn-success-light-custom:hover {
  background: color-mix(in srgb, var(--color-success-custom) 22%, white);
}

/* ---- LIGHT-COLOR LIGHT BUTTON ---- */
.btn-lightcolor-light-custom {
  background: color-mix(in srgb, var(--color-light-custom) 20%, white);
  border-color: var(--color-light-custom);
  color: var(--color-light-custom);
}
.btn-lightcolor-light-custom:hover {
  background: color-mix(in srgb, var(--color-light-custom) 30%, white);
}
/* ---- ERROR LIGHT BUTTON ---- */
.btn-error-light-custom {
  background: color-mix(in srgb, var(--color-error-custom) 14%, white);
  border: 1px solid var(--color-error-custom);
  color: var(--color-error-custom);
}

.btn-error-light-custom:hover {
  background: color-mix(in srgb, var(--color-error-custom) 22%, white);
  color: var(--color-error-custom);

}

/* ---- warning LIGHT BUTTON ---- */
.btn-warning-light-custom {
  background: color-mix(in srgb, var(--color-warning-custom) 14%, white);
  border: 1px solid var(--color-warning-custom);
  color: var(--color-warning-custom);
}

.btn-warning-light-custom:hover {
  background: color-mix(in srgb, var(--color-warning-custom) 22%, white);
  color: var(--color-warning-custom);

}

/* ---------- Alerts ---------- */
.alert-custom {
  padding: .75rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  display: flex;
  gap: .75rem;
  align-items: center;
  line-height: 1.2;
}

/* Primary alert */
.alert-primary-custom {
  background: linear-gradient(180deg, rgba(105,162,178,0.12), rgba(105,162,178,0.06));
  color: var(--color-black-custom);
  border-color: rgba(105,162,178,0.18);
}

/* Accent alert */
.alert-accent-custom {
  background: linear-gradient(180deg, rgba(0,151,189,0.12), rgba(0,151,189,0.06));
  color: var(--color-black-custom);
  border-color: rgba(0,151,189,0.18);
}

/* Success alert */
.alert-success-custom {
  background: linear-gradient(180deg, rgba(122,199,183,0.12), rgba(122,199,183,0.06));
  color: var(--color-black-custom);
  border-color: rgba(122,199,183,0.18);
}

/* Light alert (soft) */
.alert-light-custom {
  background: var(--color-light-custom);
  color: var(--color-black-custom);
  border-color: rgba(181,233,244,0.4);
}

/* Error alert (semantic) */
.alert-error-custom {
  background: linear-gradient(180deg, rgba(220,53,69,0.08), rgba(220,53,69,0.03));
  color: var(--color-error-custom);
  border-color: rgba(220,53,69,0.16);
}

/* ---------- Badges ---------- */


/* ---------- Text color utilities ---------- */
.text-primary-custom { color: var(--color-primary-custom) !important; }
.text-secondary-custom { color: var(--color-secondary-custom) !important; }
.text-accent-custom { color: var(--color-accent-custom) !important; }
.text-success-custom { color: var(--color-success-custom) !important; }
.text-light-custom   { color: var(--color-light-custom) !important; }

.text-white-custom { color: var(--color-white-custom) !important; }
.text-black-custom { color: var(--color-black-custom) !important; }
.text-error-custom { color: var(--color-error-custom) !important; }

/* ---------- Border utilities ---------- */
.border-primary-custom { border-color: var(--color-primary-custom) !important; }
.border-accent-custom  { border-color: var(--color-accent-custom) !important; }

/* Small helpers */
.kbd-custom {
  display:inline-block; padding:.15rem .35rem; border-radius:.25rem;
  background: rgba(0,0,0,0.05); font-weight:600; font-size:.85rem;
}

.input-custom {
  padding: 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: var(--input-text) !important;
  margin-top: 0.5rem;
  display: block;
}
.select-custom {
  padding: 0.7rem !important;
  border-radius: 0.4rem;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
  color: var(--input-text) !important;
  margin-top: 0.5rem;
  display: block;
}
.select-custom:focus {
  border-color: var(--input-border-focus);
  outline: none;
}
.input-custom:focus {
  border-color: var(--input-border-focus);
  outline: none;
}
.input-error-custom {
  border-color: var(--input-border-error) !important;
  color: var(--text-error);
}


/* Info */
.alert-info-custom {
  background-color: var(--alert-info-bg);
  color: var(--alert-info-text);
  border-color: #93cbff;
}

/* Success */
.alert-success-custom {
  background-color: var(--alert-success-bg);
  color: var(--alert-success-text);
  border-color: var(--alert-success-text);
}

/* Error */
.alert-error-custom {
  background-color: var(--alert-error-bg);
  color: var(--alert-error-text);
  border-color: var(--alert-error-text);
}

/* Warning */
.alert-warning-custom {
  background-color: var(--alert-warning-bg);
  color: var(--alert-warning-text);
  border-color: var(--alert-warning-text);
}