:root {
    --seoxp-ink: #15233b;
    --seoxp-muted: #5f6f86;
    --seoxp-analysis: #009e69;
    --seoxp-analysis-hover: #007850;
    --seoxp-analysis-dark: #006b47;
    --seoxp-analysis-soft: rgba(0, 158, 105, .1);
    --seoxp-learning: #df6b3a;
    --seoxp-learning-dark: #d95d24;
    --seoxp-learning-soft: rgba(223, 107, 58, .1);
    --seoxp-surface: #ffffff;
    --seoxp-soft: #f3faf7;
    --seoxp-line: #dfe7f1;
    --seoxp-radius: 1rem;
    --seoxp-disabled: #757575;
}

body,
button,
input,
select,
textarea {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Analysis / Tools — filled primary. */
.btn-primary {
    color: #fff;
    background: var(--seoxp-analysis);
    border-color: var(--seoxp-analysis);
}

.btn-primary:hover {
    color: #fff;
    background: var(--seoxp-analysis-hover);
    border-color: var(--seoxp-ink);
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.focus {
    color: #fff;
    background: var(--seoxp-analysis-hover);
    border-color: var(--seoxp-ink);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background: var(--seoxp-analysis-dark);
    border-color: var(--seoxp-ink);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background: var(--seoxp-disabled);
    border-color: var(--seoxp-disabled);
    opacity: 1;
}

/* Analysis / Tools — transparent secondary at rest. */
.btn-outline-primary {
    color: var(--seoxp-analysis);
    background: transparent;
    border-color: var(--seoxp-analysis);
}

.btn-outline-primary:hover {
    color: #fff;
    background: var(--seoxp-analysis);
    border-color: var(--seoxp-ink);
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary.focus {
    color: var(--seoxp-analysis-dark);
    background: transparent;
    border-color: var(--seoxp-ink);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background: var(--seoxp-analysis-dark);
    border-color: var(--seoxp-ink);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--seoxp-disabled);
    background: transparent;
    border-color: var(--seoxp-disabled);
    opacity: 1;
}

/* Learning / Aprende — filled primary and transparent secondary. */
.btn-seoxp-learning {
    color: #fff;
    background: var(--seoxp-learning);
    border-color: var(--seoxp-learning);
}

.btn-seoxp-learning:hover,
.btn-seoxp-learning:focus,
.btn-seoxp-learning:focus-visible,
.btn-seoxp-learning.focus {
    color: #fff;
    background: var(--seoxp-learning-dark);
    border-color: var(--seoxp-ink);
}

.btn-seoxp-learning:focus,
.btn-seoxp-learning:focus-visible,
.btn-seoxp-learning.focus {
    box-shadow: 0 0 0 .2rem rgba(223, 107, 58, .35);
}

.btn-seoxp-learning:not(:disabled):not(.disabled).active,
.btn-seoxp-learning:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--seoxp-learning-dark);
    border-color: var(--seoxp-ink);
}

.btn-seoxp-learning.disabled,
.btn-seoxp-learning:disabled {
    color: #fff;
    background: var(--seoxp-disabled);
    border-color: var(--seoxp-disabled);
    opacity: 1;
}

.btn-outline-seoxp-learning {
    color: var(--seoxp-learning);
    background: transparent;
    border-color: var(--seoxp-learning);
}

.btn-outline-seoxp-learning:hover {
    color: #fff;
    background: var(--seoxp-learning);
    border-color: var(--seoxp-ink);
}

.btn-outline-seoxp-learning:focus,
.btn-outline-seoxp-learning:focus-visible,
.btn-outline-seoxp-learning.focus {
    color: var(--seoxp-learning-dark);
    background: transparent;
    border-color: var(--seoxp-ink);
    box-shadow: 0 0 0 .2rem rgba(223, 107, 58, .35);
}

.btn-outline-seoxp-learning:not(:disabled):not(.disabled).active,
.btn-outline-seoxp-learning:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--seoxp-learning-dark);
    border-color: var(--seoxp-ink);
}

.btn-outline-seoxp-learning.disabled,
.btn-outline-seoxp-learning:disabled {
    color: var(--seoxp-disabled);
    background: transparent;
    border-color: var(--seoxp-disabled);
    opacity: 1;
}

.dark {
    --seoxp-ink: #edf4ff;
    --seoxp-muted: #aab9ce;
    --seoxp-surface: #111827;
    --seoxp-soft: #182c27;
    --seoxp-line: #2b3a50;
}
