/* ==========================================================================
   Design Tokens & Color Variables
   ========================================================================== */
:root {
    /* Light Mode Archetype */
    --canvas-bg: #FFFFFF;
    --card-bg: #F9FAFB;
    --border-color: #E5E7EB;
    --text-main: #111827;
    --text-muted: #4B5563;
    --text-dim: #9CA3AF;

    /* Functional pipeline palette */
    --color-ingress-blue: #5484ED;
    --color-staged-yellow: #FBD75B;
    --color-settled-green: #51B749;
    --color-fail-red: #DC2127;
    --color-breaker-orange: #FFB878;
    --color-rollback-purple: #DBADFF;

    /* Semantic state aliases */
    --btn-bg: var(--color-ingress-blue);
    --btn-text: #FFFFFF;
    --color-success: var(--color-settled-green);
    --color-danger: var(--color-fail-red);
    --color-warning: var(--color-staged-yellow);
}

@media (prefers-color-scheme: dark) {
    :root {
        --canvas-bg: #09090b;
        --card-bg: #141416;
        --border-color: #27272a;
        --text-main: #f4f4f5;
        --text-muted: #a1a1aa;
        --text-dim: #71717a;

        --color-ingress-blue: #5484ED;
        --color-staged-yellow: #FBD75B;
        --color-settled-green: #51B749;
        --color-fail-red: #DC2127;
        --color-breaker-orange: #FFB878;
        --color-rollback-purple: #DBADFF;

        --btn-bg: var(--color-ingress-blue);
        --btn-text: #FFFFFF;
        --color-success: var(--color-settled-green);
        --color-danger: var(--color-fail-red);
        --color-warning: var(--color-staged-yellow);
    }
}

/* ==========================================================================
   Universal Canvas Setup
   ========================================================================== */
html,
body {
    background-color: var(--canvas-bg);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

hr.section-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 32px 0;
}

/* ==========================================================================
   Shared Buttons
   ========================================================================== */
.btn-primary,
.btn-secondary,
.btn-chaos {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.65rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.btn-primary {
    background: var(--color-ingress-blue);
    color: var(--btn-text);
    border-color: transparent;
}

.btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text-main);
}

.btn-chaos {
    background: var(--color-fail-red);
    color: #fff;
    border-color: transparent;
}

.btn-secondary.active,
.btn-chaos.active {
    box-shadow: inset 0 0 0 1px var(--color-ingress-blue);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-chaos:hover {
    opacity: 0.9;
}