:root {
    /* Page */
    --sp-contact-page-bg: #f8f9fa;
    --sp-contact-page-text-color: #333;
    --sp-contact-page-font-family: inherit;
    /* Container */
    --sp-contact-container-bg: transparent;
    --sp-contact-container-shadow: none;
    --sp-contact-container-radius: 0;
    --sp-contact-container-padding: 0;
    /* Title */
    --sp-contact-title-color: inherit;
    --sp-contact-title-size: 1.75rem;
    --sp-contact-title-weight: 700;
    --sp-contact-title-margin: 0 0 1.5rem 0;
    /* Form */
    --sp-contact-form-bg: #fff;
    --sp-contact-form-radius: 8px;
    --sp-contact-form-shadow: 0 1px 3px rgba(0,0,0,.1);
    --sp-contact-form-padding: 2rem;
    /* Labels */
    --sp-contact-label-color: #555;
    --sp-contact-label-size: .875rem;
    --sp-contact-label-weight: 600;
    --sp-contact-label-margin: 0 0 .25rem 0;
    /* Inputs */
    --sp-contact-input-bg: #fff;
    --sp-contact-input-color: #333;
    --sp-contact-input-border: 1px solid #ccc;
    --sp-contact-input-radius: 6px;
    --sp-contact-input-padding-y: .5rem;
    --sp-contact-input-padding-x: .75rem;
    --sp-contact-input-size: .9375rem;
    --sp-contact-input-focus-border: #d4a017;
    --sp-contact-input-focus-shadow: 0 0 0 3px rgba(212,160,23,.2);
    --sp-contact-input-error-border: 1px solid #dc3545;
    --sp-contact-input-error-shadow: 0 0 0 3px rgba(220,53,69,.2);
    --sp-contact-input-group-margin: 0 0 1rem 0;
    /* Textarea */
    --sp-contact-textarea-height: 120px;
    /* Button */
    --sp-contact-btn-bg: #d4a017;
    --sp-contact-btn-color: #fff;
    --sp-contact-btn-radius: 6px;
    --sp-contact-btn-padding-y: .625rem;
    --sp-contact-btn-padding-x: 1.5rem;
    --sp-contact-btn-size: 1rem;
    --sp-contact-btn-weight: 600;
    --sp-contact-btn-hover-bg: #b8890a;
    --sp-contact-btn-hover-color: #fff;
    --sp-contact-btn-full-width: false;
    /* Info card */
    --sp-contact-info-card-bg: #fff;
    --sp-contact-info-card-radius: 8px;
    --sp-contact-info-card-shadow: 0 1px 3px rgba(0,0,0,.1);
    --sp-contact-info-card-padding: 1.5rem;
    --sp-contact-info-icon-color: #d4a017;
    --sp-contact-info-icon-size: 1.25rem;
    --sp-contact-info-icon-margin: 0 0 .5rem 0;
    --sp-contact-info-text-color: #666;
    --sp-contact-info-text-size: .875rem;
    --sp-contact-info-item-gap: 1.5rem;
    /* Section */
    --sp-contact-section-gap: 2rem;
    --sp-contact-section-margin: 0 auto;
}

/* Local alias */
.sp-contact {
    --sco-page-bg: var(--sp-contact-page-bg);
    --sco-page-text-color: var(--sp-contact-page-text-color);
    --sco-page-font-family: var(--sp-contact-page-font-family);
    --sco-container-bg: var(--sp-contact-container-bg);
    --sco-container-shadow: var(--sp-contact-container-shadow);
    --sco-container-radius: var(--sp-contact-container-radius);
    --sco-container-padding: var(--sp-contact-container-padding);
    --sco-title-color: var(--sp-contact-title-color);
    --sco-title-size: var(--sp-contact-title-size);
    --sco-title-weight: var(--sp-contact-title-weight);
    --sco-title-margin: var(--sp-contact-title-margin);
    --sco-form-bg: var(--sp-contact-form-bg);
    --sco-form-radius: var(--sp-contact-form-radius);
    --sco-form-shadow: var(--sp-contact-form-shadow);
    --sco-form-padding: var(--sp-contact-form-padding);
    --sco-label-color: var(--sp-contact-label-color);
    --sco-label-size: var(--sp-contact-label-size);
    --sco-label-weight: var(--sp-contact-label-weight);
    --sco-label-margin: var(--sp-contact-label-margin);
    --sco-input-bg: var(--sp-contact-input-bg);
    --sco-input-color: var(--sp-contact-input-color);
    --sco-input-border: var(--sp-contact-input-border);
    --sco-input-radius: var(--sp-contact-input-radius);
    --sco-input-padding-y: var(--sp-contact-input-padding-y);
    --sco-input-padding-x: var(--sp-contact-input-padding-x);
    --sco-input-size: var(--sp-contact-input-size);
    --sco-input-focus-border: var(--sp-contact-input-focus-border);
    --sco-input-focus-shadow: var(--sp-contact-input-focus-shadow);
    --sco-input-error-border: var(--sp-contact-input-error-border);
    --sco-input-error-shadow: var(--sp-contact-input-error-shadow);
    --sco-input-group-margin: var(--sp-contact-input-group-margin);
    --sco-textarea-height: var(--sp-contact-textarea-height);
    --sco-btn-bg: var(--sp-contact-btn-bg);
    --sco-btn-color: var(--sp-contact-btn-color);
    --sco-btn-radius: var(--sp-contact-btn-radius);
    --sco-btn-padding-y: var(--sp-contact-btn-padding-y);
    --sco-btn-padding-x: var(--sp-contact-btn-padding-x);
    --sco-btn-size: var(--sp-contact-btn-size);
    --sco-btn-weight: var(--sp-contact-btn-weight);
    --sco-btn-hover-bg: var(--sp-contact-btn-hover-bg);
    --sco-btn-hover-color: var(--sp-contact-btn-hover-color);
    --sco-btn-full-width: var(--sp-contact-btn-full-width);
    --sco-info-card-bg: var(--sp-contact-info-card-bg);
    --sco-info-card-radius: var(--sp-contact-info-card-radius);
    --sco-info-card-shadow: var(--sp-contact-info-card-shadow);
    --sco-info-card-padding: var(--sp-contact-info-card-padding);
    --sco-info-icon-color: var(--sp-contact-info-icon-color);
    --sco-info-icon-size: var(--sp-contact-info-icon-size);
    --sco-info-icon-margin: var(--sp-contact-info-icon-margin);
    --sco-info-text-color: var(--sp-contact-info-text-color);
    --sco-info-text-size: var(--sp-contact-info-text-size);
    --sco-info-item-gap: var(--sp-contact-info-item-gap);
    --sco-section-gap: var(--sp-contact-section-gap);
    --sco-section-margin: var(--sp-contact-section-margin);

    background: var(--sco-page-bg);
    color: var(--sco-page-text-color);
    font-family: var(--sco-page-font-family);
}

/* ===== Page ===== */
.sp-contact-page {
    background: var(--sco-page-bg);
    color: var(--sco-page-text-color);
    font-family: var(--sco-page-font-family);
}

/* ===== Container ===== */
.sp-contact-container {
    background: var(--sco-container-bg);
    box-shadow: var(--sco-container-shadow);
    border-radius: var(--sco-container-radius);
    padding: var(--sco-container-padding);
}

/* ===== Title ===== */
.sp-contact-title {
    color: var(--sco-title-color);
    font-size: var(--sco-title-size);
    font-weight: var(--sco-title-weight);
    margin: var(--sco-title-margin);
}

/* ===== Two-column layout ===== */
.sp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sco-section-gap);
    margin: var(--sco-section-margin);
}

/* ===== Form ===== */
.sp-contact-form {
    background: var(--sco-form-bg);
    border-radius: var(--sco-form-radius);
    box-shadow: var(--sco-form-shadow);
    padding: var(--sco-form-padding);
}

/* Labels */
.sp-contact-form label,
.sp-contact-label {
    color: var(--sco-label-color);
    font-size: var(--sco-label-size);
    font-weight: var(--sco-label-weight);
    margin: var(--sco-label-margin);
    display: block;
}

/* Inputs */
.sp-contact-input {
    background: var(--sco-input-bg);
    color: var(--sco-input-color);
    border: var(--sco-input-border);
    border-radius: var(--sco-input-radius);
    padding: var(--sco-input-padding-y) var(--sco-input-padding-x);
    font-size: var(--sco-input-size);
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.sp-contact-input:focus {
    border-color: var(--sco-input-focus-border);
    box-shadow: var(--sco-input-focus-shadow);
    outline: none;
}

.sp-contact-input.is-invalid,
.sp-contact-input.error {
    border: var(--sco-input-error-border);
    box-shadow: var(--sco-input-error-shadow);
}

.sp-contact-input-group {
    margin: var(--sco-input-group-margin);
}

/* Textarea */
.sp-contact-textarea {
    height: var(--sco-textarea-height);
    resize: vertical;
    min-height: 80px;
}

/* Button */
.sp-contact-btn {
    background: var(--sco-btn-bg);
    color: var(--sco-btn-color);
    border: none;
    border-radius: var(--sco-btn-radius);
    padding: var(--sco-btn-padding-y) var(--sco-btn-padding-x);
    font-size: var(--sco-btn-size);
    font-weight: var(--sco-btn-weight);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.sp-contact-btn:hover {
    background: var(--sco-btn-hover-bg);
    color: var(--sco-btn-hover-color);
}

/* Submit button */
.sp-contact-submit {
    background: var(--sco-btn-bg);
    color: var(--sco-btn-color);
    border: none;
    border-radius: var(--sco-btn-radius);
    padding: var(--sco-btn-padding-y) var(--sco-btn-padding-x);
    font-size: var(--sco-btn-size);
    font-weight: var(--sco-btn-weight);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.sp-contact-submit:hover {
    background: var(--sco-btn-hover-bg);
    color: var(--sco-btn-hover-color);
}

.sp-contact-submit.sp-contact-full-width,
.sp-contact-btn.sp-contact-full-width {
    width: 100%;
}

/* ===== Info card ===== */
.sp-contact-info-card {
    background: var(--sco-info-card-bg);
    border-radius: var(--sco-info-card-radius);
    box-shadow: var(--sco-info-card-shadow);
    padding: var(--sco-info-card-padding);
}

.sp-contact-info-icon {
    color: var(--sco-info-icon-color);
    font-size: var(--sco-info-icon-size);
    margin: var(--sco-info-icon-margin);
}

.sp-contact-info-text {
    color: var(--sco-info-text-color);
    font-size: var(--sco-info-text-size);
}

.sp-contact-info-items {
    display: flex;
    flex-direction: column;
    gap: var(--sco-info-item-gap);
}

/* ===== Empty state ===== */
.sp-contact-empty {
    text-align: center;
    padding: 2rem;
    color: var(--sco-info-text-color);
    font-size: var(--sco-info-text-size);
}

/* ===== Section spacing ===== */
.sp-contact-section {
    margin: var(--sco-section-margin);
}

.sp-contact-section + .sp-contact-section {
    margin-top: var(--sco-section-gap);
}

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark) {
    .sp-contact {
        --sco-page-bg: #1a1a2e;
        --sco-page-text-color: #e0e0e0;
        --sco-container-bg: #16213e;
        --sco-container-shadow: 0 2px 8px rgba(0,0,0,.3);
        --sco-form-bg: #16213e;
        --sco-form-shadow: 0 2px 8px rgba(0,0,0,.3);
        --sco-label-color: #aaa;
        --sco-input-bg: #0f3460;
        --sco-input-color: #e0e0e0;
        --sco-input-border: 1px solid #2a2a4a;
        --sco-input-focus-border: #d4a017;
        --sco-input-focus-shadow: 0 0 0 3px rgba(212,160,23,.25);
        --sco-btn-bg: #d4a017;
        --sco-btn-color: #fff;
        --sco-btn-hover-bg: #b8890a;
        --sco-info-card-bg: #16213e;
        --sco-info-card-shadow: 0 2px 8px rgba(0,0,0,.3);
        --sco-info-icon-color: #d4a017;
        --sco-info-text-color: #aaa;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sp-contact-grid {
        grid-template-columns: 1fr;
    }

    .sp-contact-form {
        padding: calc(var(--sco-form-padding) / 2);
    }

    .sp-contact-title {
        font-size: calc(var(--sco-title-size) * .85);
    }
}