/* =========================================================
   Goodlord Theme Overrides — based on official brand guide
   Scope: .theme-goodlord
   Load AFTER your base default.css (semantic.css)
   ========================================================= */

.theme-goodlord {
    /* Core brand colours */
    --primary: #01ddc5;                    /* turquoise */
    --primary-600: #00bca8;                /* darker hover version */
    --primary-ring: rgba(1, 221, 197, 0.35);
    --primary-ring-strong: rgba(1, 221, 197, 0.55);

    /* Secondary navy / text colour */
    --secondary: #052340;                  /* deep navy used for text + hover */

    /* Accent and complementary tones */
    --accent: #01ddc5;
    --accent-600: #00bca8;
    --tab-accent: #00bca8;

    /* Text palette */
    --heading: #052340;                    /* headings + body */
    --muted: #475569;
    --muted-dark: #334155;
    --muted-light: #94A3B8;

    /* Backgrounds */
    --surface-bg: #ffffff;
    --surface-muted: #f3f3f3;              /* off-white card/form background */
    --border-muted: #E2E8F0;
    --divide-muted: #E5E7EB;
    --border-primary: #01ddc5;             /* primary border (e.g. focus) */

    /* Success / Error (consistent) */
    --success-bg: #ECFDF5;
    --success-text: #065F46;
    --success-border: #01ddc5;

    --error: #DC2626;
    --error-border: #EF4444;

    --warning: #e6fffc;
    --warning-border: var(--border-primary);
    --warning-text: #004c44;

    /* Confirmation page colours */
    --confirm-bg-start: #01ddc5;
    --confirm-bg-end: #f3f3f3;
    --loading-bar-bg: #E2E8F0;
    --loading-bar-color: var(--primary);
    --loading-text-color: #052340;
    --confirmation-card-bg: rgba(255,255,255,0.96);
    --confirmation-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================================================
   Layout / Backgrounds
   ========================================================= */
.theme-goodlord .bg-muted-light { background: var(--surface-muted); }
.theme-goodlord .bg-confirm-gradient {
    background: linear-gradient(180deg, var(--confirm-bg-start) 0%, var(--confirm-bg-end) 100%);
}

/* =========================================================
   Buttons
   ========================================================= */

/* Primary Button: turquoise background, dark text → navy on hover with white text */
.theme-goodlord .btn-confirm,
.theme-goodlord .btn-primary {
    background: var(--primary);
    color: var(--secondary);
    font-weight: 600;
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s, transform .1s;
}
.theme-goodlord .btn-confirm:hover,
.theme-goodlord .btn-primary:hover {
    background: var(--secondary);
    color: #fff;
}

/* Secondary Button: white background, navy border, navy text → turquoise on hover */
.theme-goodlord .btn-outline {
    background: #fff;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s;
}
.theme-goodlord .btn-outline:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--secondary);
}


.theme-goodlord .bg-primary-hover { background: rgba(1, 221, 197, 0.09); }
.theme-goodlord .hover\:bg-primary-hover:hover { background: rgba(1, 221, 197, 0.09); }

/* =========================================================
   Forms + Focus States
   ========================================================= */
.theme-goodlord :where(input, select, textarea) {
    border-color: var(--border-muted);
    background: #fff;
    color: var(--heading);
}
.theme-goodlord :where(input, select, textarea):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-ring);
}
.theme-goodlord ::placeholder { color: var(--muted-light); }
.theme-goodlord input[type="checkbox"],
.theme-goodlord input[type="radio"] {
    accent-color: var(--primary);
}

/* =========================================================
   Text + Links
   ========================================================= */
.theme-goodlord .text-heading { color: var(--heading); }
.theme-goodlord .text-link { color: var(--primary); }
.theme-goodlord .text-link:hover { color: var(--primary-600); }
.theme-goodlord .text-accent { color: var(--accent); }

/* =========================================================
   Confirmation Page
   ========================================================= */
.theme-goodlord .confirmation-wrapper {
    background: linear-gradient(to bottom, var(--confirm-bg-start), var(--confirm-bg-end));
}
.theme-goodlord .confirmation-card {
    background: var(--confirmation-card-bg);
    box-shadow: var(--confirmation-shadow);
}
.theme-goodlord .loading-wrapper { background: var(--loading-bar-bg); }
.theme-goodlord .loading-bar { background: var(--loading-bar-color); }
.theme-goodlord .loading-text { color: var(--loading-text-color); }

/* =========================================================
   Logo / Branding
   ========================================================= */
.theme-goodlord .app-logo {
    background: url('/images/logos/goodlord-logo.svg') no-repeat center center;
    background-size: contain;
    width: 15rem !important;
    height: 3.5rem !important;
    margin-left: -1.4rem;
}

/* =========================================================
   Utilities / Misc.
   ========================================================= */
.theme-goodlord .focus\:ring-primary-ring-strong:focus {
    box-shadow: 0 0 0 2px var(--primary-ring-strong) !important;
}
.theme-goodlord .text-spinner { color: var(--primary); }
.theme-goodlord .hover\:bg-muted-hover:hover { background: #E2E8F0; }
.theme-goodlord .bg-skip-modal { background: #1E1B2B; }
.theme-goodlord .close-error-modal,
.theme-goodlord .close-skip-modal {
    color: white;
    font-weight: bold;
    padding-right: 0.5rem;
    font-size: 2rem !important;
}