:root {
    --ocean-blue: #07C3D6;
    --blue: #1870D1;
    --dark: #0C0C0C;
    --dark-2: #1E1E1E;
    --light: #F6F6F6;
    --red: #fd3649;
    --ocean-blue-light:#B0E0E6;
    --blue-light:#EFF7FF;
    --dark-gray: #767676;

    /* Semantic variables (light mode defaults) */
    --zf-primary: #1870D1;
    --zf-primary-dark: #1561AC;
    --zf-primary-light: rgba(24, 112, 209, 0.1);
    --zf-secondary-bg: #F6F6F6;
    --zf-secondary-hover: #E5E7EB;
    --zf-text-primary: #111827;
    --zf-text-secondary: #6B7280;
    --zf-text-muted: #9CA3AF;
    --zf-text-placeholder: #9CA3AF;
    --zf-error: #fd3649;
    --zf-error-dark: #DC2626;
    --zf-error-light: rgba(253, 54, 73, 0.1);
    --zf-border: #E5E7EB;
    --zf-input-bg: #fff;
    --zf-disabled-bg: #F3F4F6;
    --zf-card-bg: #fff;
    --zf-card-border: #E5E7EB;
    --zf-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --zf-card-header-bg: #F9FAFB;
    --zf-card-footer-bg: #F9FAFB;
    --zf-ghost-hover: rgba(0, 0, 0, 0.04);
    --zf-section-bg: #F9FAFB;
    --zf-success: #16A34A;
    --zf-link: #006bb7;
}

/* ================================ */
/* Dark Mode Variables              */
/* ================================ */

html[data-theme="dark"] {
    /* Root palette overrides */
    --light: #0D1117;
    --dark: #E6EDF3;
    --dark-2: #C9D1D9;
    --dark-gray: #8B949E;
    --blue-light: #1C2333;
    --red: #F85149;

    /* Semantic component variables */
    --zf-primary: #58A6FF;
    --zf-primary-dark: #388BFD;
    --zf-primary-light: rgba(88, 166, 255, 0.15);
    --zf-secondary-bg: #1C2333;
    --zf-secondary-hover: #30363D;
    --zf-text-primary: #E6EDF3;
    --zf-text-secondary: #8B949E;
    --zf-text-muted: #8B949E;
    --zf-text-placeholder: #6E7681;
    --zf-error: #F85149;
    --zf-error-dark: #DA3633;
    --zf-error-light: rgba(248, 81, 73, 0.15);
    --zf-border: #30363D;
    --zf-input-bg: #161B22;
    --zf-disabled-bg: #1C2333;
    --zf-card-bg: #161B22;
    --zf-card-border: #21262D;
    --zf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --zf-card-header-bg: #1C2333;
    --zf-card-footer-bg: #1C2333;
    --zf-ghost-hover: rgba(255, 255, 255, 0.06);
    --zf-section-bg: #161B22;
    --zf-success: #3FB950;
    --zf-link: #58A6FF;

    /* Bootstrap variable overrides — makes body text, headings,
       muted text, borders, and backgrounds dark-mode aware globally */
    --bs-body-color: #E6EDF3;
    --bs-body-color-rgb: 230, 237, 243;
    --bs-body-bg: #0D1117;
    --bs-heading-color: #E6EDF3;
    --bs-secondary-color: #8B949E;
    --bs-tertiary-color: #6E7681;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: #30363D;
    --bs-secondary-bg: #161B22;
    --bs-tertiary-bg: #1C2333;
    --bs-link-color: #58A6FF;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none !important;
}

html {
    font-family: "Inter", sans-serif;
    font-weight: normal;
    background: var(--light);
    font-size: 14px;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: normal;
    background: var(--light);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a, .btn-link {
    color: var(--zf-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--zf-primary);
    border-color: var(--zf-primary-dark);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.required-indicator {
    color: var(--red);
    margin-left: 0.125rem;
}

.validation-message {
    color: var(--red);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

footer {
  padding: 0.5rem;
  text-align: center;
}

html[data-theme="dark"] .text-muted {
    color: var(--bs-secondary-color) !important;
}

html[data-theme="dark"] .btn-primary {
    background-color: #388BFD;
    border-color: #58A6FF;
}

html[data-theme="dark"] .btn-secondary {
    background-color: #30363D;
    border-color: #30363D;
    color: #E6EDF3;
}

html[data-theme="dark"] .btn-outline-secondary {
    color: #C9D1D9;
    border-color: #30363D;
}

html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #30363D;
    border-color: #30363D;
    color: #E6EDF3;
}

html[data-theme="dark"] .btn:focus,
html[data-theme="dark"] .btn:active:focus,
html[data-theme="dark"] .btn-link.nav-link:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #0D1117, 0 0 0 0.25rem #58A6FF;
}

html[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline: 1px solid #3FB950;
}

html[data-theme="dark"] .invalid {
    outline: 1px solid #F85149;
}

html[data-theme="dark"] .darker-border-checkbox.form-check-input {
    border-color: #6E7681;
}

html[data-theme="dark"] footer {
    color: #8B949E;
}

html[data-theme="dark"] footer a {
    color: #58A6FF;
}