/*
 * CONNECT Premium Design System v1.0.0
 * Foundation layer for WHMCS client area.
 * LOOP 001 — 2026-09-17
 * Scope: tokens, accessibility primitives and opt-in components only.
 */

:root {
    --connect-font-sans: Inter, "Segoe UI", Arial, sans-serif;
    --connect-primary: #176BFF;
    --connect-primary-dark: #0B45C9;
    --connect-accent: #16C7E8;
    --connect-navy: #081B33;
    --connect-navy-deep: #041020;
    --connect-surface: #F5F8FF;
    --connect-surface-strong: #EEF4FF;
    --connect-white: #FFFFFF;
    --connect-text: #20304A;
    --connect-muted: #66748D;
    --connect-border: #DFE7F5;
    --connect-success: #14A36D;
    --connect-warning: #B7791F;
    --connect-danger: #D64545;
    --connect-info: #176BFF;
    --connect-radius-xs: 8px;
    --connect-radius-sm: 12px;
    --connect-radius-md: 20px;
    --connect-radius-lg: 30px;
    --connect-shadow-xs: 0 6px 18px rgba(8, 27, 51, .06);
    --connect-shadow-sm: 0 12px 34px rgba(8, 27, 51, .08);
    --connect-shadow-md: 0 24px 70px rgba(4, 16, 32, .16);
    --connect-focus-ring: 0 0 0 3px rgba(23, 107, 255, .22);
    --connect-transition-fast: 160ms ease;
    --connect-transition: 220ms ease;
    --connect-control-height: 46px;
    --connect-touch-target: 44px;
    --connect-content-max: 1180px;
}

body.connect-theme {
    font-family: var(--connect-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.connect-theme :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(23, 107, 255, .30);
    outline-offset: 2px;
}

/* Opt-in primitives for progressive migration of legacy WHMCS screens. */
.connect-ui-shell {
    width: min(100%, var(--connect-content-max));
    margin-inline: auto;
}

.connect-ui-card {
    background: var(--connect-white);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius-md);
    box-shadow: var(--connect-shadow-xs);
}

.connect-ui-card--elevated {
    box-shadow: var(--connect-shadow-sm);
}

.connect-ui-heading {
    color: var(--connect-navy);
    font-weight: 800;
    letter-spacing: -.02em;
}

.connect-ui-muted {
    color: var(--connect-muted);
}

.connect-ui-control {
    min-height: var(--connect-control-height);
    border: 1px solid var(--connect-border);
    border-radius: var(--connect-radius-sm);
    background: var(--connect-white);
    color: var(--connect-text);
    transition: border-color var(--connect-transition-fast), box-shadow var(--connect-transition-fast);
}

.connect-ui-control:focus {
    border-color: var(--connect-primary);
    box-shadow: var(--connect-focus-ring);
}

.connect-ui-action {
    min-height: var(--connect-touch-target);
    border-radius: var(--connect-radius-sm);
    font-weight: 700;
    transition: transform var(--connect-transition-fast), box-shadow var(--connect-transition-fast), background-color var(--connect-transition-fast);
}

.connect-ui-empty {
    padding: 32px 24px;
    border: 1px dashed var(--connect-border);
    border-radius: var(--connect-radius-md);
    background: var(--connect-surface);
    text-align: center;
    color: var(--connect-muted);
}

.connect-ui-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.connect-ui-status--success { background: rgba(20, 163, 109, .10); color: #0B7C52; }
.connect-ui-status--warning { background: rgba(183, 121, 31, .11); color: #8A5A12; }
.connect-ui-status--danger { background: rgba(214, 69, 69, .10); color: #B52F2F; }
.connect-ui-status--info { background: rgba(23, 107, 255, .10); color: var(--connect-primary-dark); }

@media (prefers-reduced-motion: reduce) {
    body.connect-theme *,
    body.connect-theme *::before,
    body.connect-theme *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .connect-ui-card { border-radius: 16px; }
    .connect-ui-empty { padding: 26px 18px; }
}