:root {
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-accent: #14B8A6;
    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-heading: #0F172A;
    --color-text: #475569;
    --color-text-muted: #64748B;
    --color-border: #E2E8F0;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-focus-ring: rgba(37, 99, 235, 0.25);
    --color-primary-soft: #EFF6FF;
    --color-accent-soft: #F0FDFA;
    --color-success-soft: #ECFDF5;
    --color-warning-soft: #FFFBEB;
    --color-danger-soft: #FEF2F2;
    --color-on-primary: #FFFFFF;
    --shadow-color: rgba(15, 23, 42, 0.10);

    /* Backward-compatible aliases used by existing page styles. */
    --pi-bg: var(--color-background);
    --pi-card: var(--color-surface);
    --pi-soft: var(--color-background);
    --pi-text: var(--color-heading);
    --pi-muted: var(--color-text-muted);
    --pi-border: var(--color-border);
    --pi-primary: var(--color-primary);
    --pi-primary-dark: var(--color-primary-hover);
    --pi-green: var(--color-success);
    --pi-green-bg: var(--color-success-soft);
    --pi-yellow: var(--color-warning);
    --pi-yellow-bg: var(--color-warning-soft);
    --pi-red: var(--color-danger);
    --pi-red-bg: var(--color-danger-soft);
}

html,
body {
    background: var(--color-background);
    color: var(--color-text);
}

body,
input,
select,
textarea,
button {
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.pi-page-title,
.pi-section-title,
.pi-card-title {
    color: var(--color-heading);
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.pi-topbar,
.pi-main-nav,
.pi-footer,
.pi-content-card,
.card,
.modal-content,
[class$="-card"],
[class*="-card "] {
    border-color: var(--color-border);
}

.pi-topbar,
.pi-content-card,
.card,
.modal-content,
table,
thead,
tbody,
tr,
td,
th {
    background-color: var(--color-surface);
}

.pi-main {
    background: var(--color-background);
}

.pi-brand-mark,
.pi-btn-primary,
.btn-primary,
button[type="submit"]:not(.pi-btn-dark):not(.btn-danger):not(.pi-btn-danger):not(.pi-action-danger):not(.pi-btn-delete-all):not(.pi-action-button),
[class*="primary-button"],
[class*="submit-button"] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.pi-btn-primary:hover,
.btn-primary:hover,
button[type="submit"]:not(.pi-btn-dark):not(.btn-danger):not(.pi-btn-danger):not(.pi-action-danger):not(.pi-btn-delete-all):not(.pi-action-button):hover,
[class*="primary-button"]:hover,
[class*="submit-button"]:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.pi-main-nav a,
.pi-account-link,
.pi-footer a {
    color: var(--color-text);
}

.pi-main-nav a:hover,
.pi-main-nav a[aria-current="page"],
.pi-main-nav a.active,
.pi-account-link:hover,
.pi-footer a:hover {
    color: var(--color-primary);
}

input,
select,
textarea,
.form-control,
.form-select,
[class*="input-wrap"] {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
[class*="input-wrap"]:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

table,
th,
td,
hr,
.modal-header,
.modal-footer,
[class*="divider"] {
    border-color: var(--color-border);
}

thead,
th {
    color: var(--color-heading);
}

tbody,
td {
    color: var(--color-text);
}

.text-danger,
.field-validation-error,
.validation-summary-errors,
[class*="validation"],
[class*="error-message"] {
    color: var(--color-danger);
}

.alert-success,
[class*="success-alert"],
[class*="success-message"] {
    border-color: color-mix(in srgb, var(--color-success) 35%, white);
    background: var(--color-success-soft);
    color: #065F46;
}

.alert-warning,
[class*="warning-alert"],
[class*="warning-message"] {
    border-color: color-mix(in srgb, var(--color-warning) 40%, white);
    background: var(--color-warning-soft);
    color: #92400E;
}

.alert-danger,
[class*="danger-alert"],
[class*="error-alert"] {
    border-color: color-mix(in srgb, var(--color-danger) 35%, white);
    background: var(--color-danger-soft);
    color: #991B1B;
}

.badge-primary,
.bg-primary,
[class*="badge-primary"] {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

.badge-success,
.bg-success,
[class*="badge-success"] {
    background-color: var(--color-success) !important;
    color: var(--color-on-primary) !important;
}

.badge-warning,
.bg-warning,
[class*="badge-warning"] {
    background-color: var(--color-warning) !important;
    color: var(--color-heading) !important;
}

.badge-danger,
.bg-danger,
[class*="badge-danger"] {
    background-color: var(--color-danger) !important;
    color: var(--color-on-primary) !important;
}

.pi-stat-card,
.pi-metric-card,
[class*="metric-card"],
[class*="stat-card"],
[class*="plan-card"],
[class*="subscription-card"] {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

[class*="insight"],
[class*="opportunity"] {
    border-color: color-mix(in srgb, var(--color-accent) 35%, white);
}

[class*="insight-badge"],
[class*="opportunity-badge"],
[class*="selected-state"] {
    background-color: var(--color-accent-soft);
    color: #0F766E;
}

.btn-danger,
.pi-btn-danger,
.pi-action-danger,
.pi-btn-delete-all,
.pi-delete-link,
[class*="danger-button"],
[class*="delete-button"] {
    border: 1px solid #FECACA;
    background: #FEF2F2;
    color: #B91C1C;
}

.btn-danger:hover,
.pi-btn-danger:hover,
.pi-action-danger:hover,
.pi-btn-delete-all:hover,
.pi-delete-link:hover,
[class*="danger-button"]:hover,
[class*="delete-button"]:hover {
    border-color: #FCA5A5;
    background: #FEE2E2;
    color: #991B1B;
}

.btn-danger:focus-visible,
.pi-btn-danger:focus-visible,
.pi-action-danger:focus-visible,
.pi-btn-delete-all:focus-visible,
.pi-delete-link:focus-visible,
[class*="danger-button"]:focus-visible,
[class*="delete-button"]:focus-visible {
    outline-color: rgba(239, 68, 68, .28);
}

::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Shared surfaces and typography */
.auth-page,
.pi-page,
.pi-upload-page,
.pi-detail-page,
.pi-edit-page,
.keyword-opportunity-page,
.profit-shell,
.niche-page,
.history-page,
.pi-account-page {
    color: var(--color-text);
}

.auth-card,
.pi-page-card,
.pi-card,
.pi-panel,
.pi-submission-card,
.pi-input-panel,
.pi-result-panel,
.pi-upload-shell,
.pi-product-card,
.pi-side-card,
.pi-decision-card,
.pi-image-card,
.ko-panel,
.ko-product-card,
.profit-card,
.profit-result-card,
.profit-formula-card,
.subscription-shell,
.plan-content,
.current-plan-card,
.history-card,
.metric-card,
.pi-account-card,
.pi-stat-card {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

.auth-title,
.pi-hero h1,
.pi-upload-hero h1,
.pi-detail-topbar h1,
.pi-report-header h1,
.ko-hero h1,
.profit-hero h1,
.page-title,
.subscription-header h1,
.plan-top h2,
.profit-summary-header h2,
.profit-formula-card h2 {
    color: var(--color-heading);
}

.profit-hero h1 {
    color: var(--color-on-primary);
}

.home-page .home-hero .hero-copy h1 {
    color: var(--color-on-primary);
}

.pi-upload-page .pi-upload-hero h1 {
    color: var(--color-on-primary);
}

.pi-detail-page .pi-detail-hero h2 {
    color: var(--color-on-primary);
}

.keyword-opportunity-page .ko-hero h1 {
    color: var(--color-on-primary);
}

.auth-subtitle,
.pi-hero-text,
.pi-upload-hero p,
.pi-detail-meta,
.ko-hero p,
.page-subtitle,
.subscription-subtitle,
.secure-note,
.profit-card-header p,
.profit-field small,
.profit-result-item small,
.profit-disclaimer {
    color: var(--color-text-muted);
}

/* Buttons and interactive controls */
.pi-primary-btn,
.pi-submit-btn,
.pi-upload-btn,
.ko-submit,
.profit-button,
.auth-button,
.btn-full,
.update-plan-btn,
.plan-button-primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pi-primary-btn:hover,
.pi-submit-btn:hover,
.pi-upload-btn:hover,
.ko-submit:hover,
.profit-button:hover,
.auth-button:hover,
.btn-full:hover,
.update-plan-btn:hover,
.plan-button-primary:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.pi-secondary-btn,
.pi-btn-light,
.btn-outline,
.back-link {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.pi-secondary-btn:hover,
.pi-btn-light:hover,
.btn-outline:hover,
.back-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

/* Navigation */
.pi-main-nav {
    border-color: var(--color-border);
    background: var(--color-background);
}

.pi-main-nav a:hover,
.pi-main-nav a:focus-visible,
.pi-main-nav a.active,
.pi-main-nav a[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

.pi-brand-mark,
body.pi-public .pi-get-started-link {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pi-brand-mark:hover,
body.pi-public .pi-get-started-link:hover,
body.pi-public .pi-get-started-link:focus-visible {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
}

/* Forms */
.form-input,
.pi-input,
.pi-select,
.pi-textarea,
.ko-form input,
.profit-input-wrap,
.auth-card input,
.subscription-shell input,
.subscription-shell select {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-heading);
}

.form-input:focus,
.pi-input:focus,
.pi-select:focus,
.pi-textarea:focus,
.ko-form input:focus,
.profit-input-wrap:focus-within,
.auth-card input:focus,
.subscription-shell input:focus,
.subscription-shell select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* Dashboard, analysis, and detail states */
.pi-alert-info {
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, white);
    background: var(--color-primary-soft);
    color: #1E40AF;
}

.pi-eyebrow,
.ko-eyebrow,
.ko-section-label,
.profit-eyebrow,
.eyebrow,
.home-kicker {
    color: var(--color-primary);
}

.pi-alert-success,
.pi-status-success,
.profit-result-card.is-profitable .profit-verdict {
    border-color: color-mix(in srgb, var(--color-success) 35%, white);
    background: var(--color-success-soft);
}

.pi-alert-success,
.pi-status-success,
.profit-result-card.is-profitable .profit-verdict,
.profit-result-card.is-profitable .profit-verdict * {
    color: #065F46;
}

.pi-alert-danger,
.pi-status-danger,
.profit-result-card.is-loss .profit-verdict {
    border-color: color-mix(in srgb, var(--color-danger) 35%, white);
    background: var(--color-danger-soft);
}

.pi-alert-danger,
.pi-status-danger,
.profit-result-card.is-loss .profit-verdict,
.profit-result-card.is-loss .profit-verdict * {
    color: #991B1B;
}

.pi-status-warning,
.pi-warning-card,
.upload-warning {
    border-color: color-mix(in srgb, var(--color-warning) 40%, white);
    background: var(--color-warning-soft);
    color: #92400E;
}

/* Product submission and drag/drop */
.pi-dropzone,
.upload-dropzone,
[class*="drop-zone"] {
    border-color: var(--color-border);
    background: var(--color-background);
}

.pi-dropzone:hover,
.pi-dropzone:focus-within,
.upload-dropzone:hover,
.upload-dropzone:focus-within,
[class*="drop-zone"]:hover,
[class*="drop-zone"]:focus-within {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Calculator */
.profit-step,
.profit-formula-toggle {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.profit-formula-toggle::before,
.profit-formula-toggle::after {
    background: var(--color-primary);
}

.profit-advanced,
.profit-projection,
.profit-projection-result,
.profit-result-item {
    border-color: var(--color-border);
}

/* Niche finder and AI/opportunity highlights */
.niche-card,
.ko-opportunity-card,
.opportunity-card {
    border-color: color-mix(in srgb, var(--color-accent) 30%, white);
    background: var(--color-surface);
}

.niche-badge,
.ko-opportunity-badge,
.opportunity-badge,
.ai-insight-badge {
    background: var(--color-accent-soft);
    color: #0F766E;
}

/* Subscription selection */
.plan-option input:checked + .plan-content {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.selected-indicator {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.plan-features i {
    color: var(--color-success);
}

/* Tables and modals */
.table,
.pi-table,
.history-table,
.modal-content,
.pi-modal {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.table thead,
.pi-table thead,
.history-table thead {
    background: var(--color-background);
    color: var(--color-heading);
}

.table th,
.table td,
.pi-table th,
.pi-table td,
.history-table th,
.history-table td {
    border-color: var(--color-border);
}