/* ==================================================================
   Nexum WHMCS Client Area Theme — Master Theme Tokens & Base CSS
   Inherits from WHMCS Twenty-One architecture
   ================================================================== */

:root {
    /* Primary Colors */
    --nx-primary: #2563eb;
    --nx-primary-rgb: 37, 99, 235;
    --nx-primary-hover: #1d4ed8;
    --nx-primary-soft: #eff6ff;
    --nx-secondary: #1d4ed8;

    /* Semantic Status Colors */
    --nx-success: #16a34a;
    --nx-success-rgb: 22, 163, 74;
    --nx-success-soft: #ecfdf5;
    --nx-warning: #f59e0b;
    --nx-warning-rgb: 245, 158, 11;
    --nx-warning-soft: #fffbeb;
    --nx-danger: #ef4444;
    --nx-danger-rgb: 239, 68, 68;
    --nx-danger-soft: #fef2f2;
    --nx-info: #2563eb;

    /* Surfaces & Layout */
    --nx-white: #ffffff;
    --nx-bg: #f1f5f9;
    --nx-card-bg: #ffffff;
    --nx-text: #0f172a;
    --nx-secondary-text: #64748b;
    --nx-muted: #94a3b8;
    --nx-border: #e2e8f0;
    --nx-header-bg: #ffffff;
    --nx-footer-bg: #ffffff;
    --nx-link: #2563eb;

    /* Elevation & Shadows */
    --nx-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);

    /* Status Pill Tokens */
    --nx-pill-active-bg: #ecfdf5;
    --nx-pill-active-text: #16a34a;
    --nx-pill-pending-bg: #fffbeb;
    --nx-pill-pending-text: #d97706;
    --nx-pill-suspended-bg: #ffedd5;
    --nx-pill-suspended-text: #c2410c;
    --nx-pill-cancelled-bg: #fef2f2;
    --nx-pill-cancelled-text: #ef4444;
    --nx-pill-open-bg: #eff6ff;
    --nx-pill-open-text: #2563eb;
    --nx-pill-closed-bg: #f1f5f9;
    --nx-pill-closed-text: #64748b;

    /* Typography */
    --nx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --nx-heading-font-family: var(--nx-font-family);
    --nx-font-size: 13.5px;
    --nx-font-size-h1: 24px;
    --nx-font-size-h2: 19px;
    --nx-font-size-h3: 16px;
    --nx-font-size-h4: 14.5px;
    --nx-font-size-sm: 12px;
    --nx-font-size-xs: 11px;
    --nx-weight-body: 400;
    --nx-weight-medium: 500;
    --nx-weight-heading: 700;
    --nx-weight-button: 600;
    --nx-line-height: 1.5;
    --nx-letter-spacing: -0.01em;

    /* Geometry & Geometry Tokens */
    --nx-radius-card: 12px;
    --nx-radius-button: 8px;
    --nx-radius-input: 8px;
    --nx-radius-badge: 999px;
    --nx-radius-sm: 6px;
    --nx-radius-md: 10px;

    /* Layout Dimensions */
    --nx-border-width: 1px;
    --nx-container-width: 1220px;
    --nx-content-padding: 24px;
    --nx-card-padding: 20px;
    --nx-card-gap: 20px;
    --nx-header-height: 68px;
    --nx-logo-height: 36px;
}

/* ==================================================================
   Dark Mode Surface Overrides (.nx-dark)
   ================================================================== */
html.nx-dark, body.nx-theme.nx-dark {
    --nx-primary: #3b82f6;
    --nx-primary-rgb: 59, 130, 246;
    --nx-primary-hover: #2563eb;
    --nx-primary-soft: #1e293b;

    --nx-bg: #0b0f17;
    --nx-card-bg: #131926;
    --nx-text: #f1f5f9;
    --nx-secondary-text: #94a3b8;
    --nx-muted: #64748b;
    --nx-border: #1e293b;
    --nx-header-bg: #131926;
    --nx-footer-bg: #0f141f;
    --nx-link: #3b82f6;

    --nx-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);

    --nx-pill-active-bg: rgba(22, 163, 74, 0.16);
    --nx-pill-active-text: #34d399;
    --nx-pill-pending-bg: rgba(245, 158, 11, 0.16);
    --nx-pill-pending-text: #fbbf24;
    --nx-pill-suspended-bg: rgba(249, 115, 22, 0.16);
    --nx-pill-suspended-text: #fb923c;
    --nx-pill-cancelled-bg: rgba(239, 68, 68, 0.16);
    --nx-pill-cancelled-text: #f87171;
    --nx-pill-open-bg: rgba(59, 130, 246, 0.16);
    --nx-pill-open-text: #93c5fd;
    --nx-pill-closed-bg: rgba(100, 116, 139, 0.16);
    --nx-pill-closed-text: #cbd5e1;
}

/* Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

body.nx-theme {
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size);
    font-weight: var(--nx-weight-body);
    line-height: var(--nx-line-height);
    letter-spacing: var(--nx-letter-spacing);
    background-color: var(--nx-bg);
    color: var(--nx-text);
    transition: background-color .2s ease, color .2s ease;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.nx-theme h1, body.nx-theme .h1 { font-size: var(--nx-font-size-h1); font-weight: 700; }
body.nx-theme h2, body.nx-theme .h2 { font-size: var(--nx-font-size-h2); font-weight: 700; }
body.nx-theme h3, body.nx-theme .h3 { font-size: var(--nx-font-size-h3); font-weight: 700; }
body.nx-theme h4, body.nx-theme .h4 { font-size: var(--nx-font-size-h4); font-weight: 700; }

body.nx-theme a {
    color: var(--nx-link);
    text-decoration: none;
}
body.nx-theme a:hover {
    color: var(--nx-primary-hover);
    text-decoration: none;
}

.text-muted { color: var(--nx-secondary-text) !important; }

.nx-main-container,
#main-body {
    width: 100%;
    max-width: var(--nx-container-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--nx-content-padding);
    flex: 1 0 auto;
}