:root {
    /* =========================================================
       NEXROOT OFFICIAL BRAND COLORS
       ========================================================= */

    --nx-primary: #0F5B46;
    --nx-primary-rgb: 15, 91, 70;
    --nx-secondary: #2C4A6E;
    --nx-secondary-rgb: 44, 74, 110;
    --nx-graphite: #1A1D1F;
    --nx-graphite-rgb: 26, 29, 31;
    --nx-ivory: #F2F0EA;
    --nx-ivory-rgb: 242, 240, 234;
    --nx-desert: #D9D1C2;
    --nx-desert-rgb: 217, 209, 194;
    /* =========================================================
       SEMANTIC COLORS
       ========================================================= */

    --nx-bg: #111416;
    --nx-bg-deep: #0B0E10;
    --nx-surface: #1A1D1F;
    --nx-surface-soft: #202527;
    --nx-surface-elevated: #252B2E;
    --nx-surface-hover: #2A3134;
    --nx-text: #F2F0EA;
    --nx-text-soft: rgba(242, 240, 234, 0.78);
    --nx-text-muted: rgba(242, 240, 234, 0.58);
    --nx-text-disabled: rgba(242, 240, 234, 0.36);
    --nx-border: rgba(217, 209, 194, 0.18);
    --nx-border-strong: rgba(217, 209, 194, 0.34);
    --nx-border-subtle: rgba(217, 209, 194, 0.10);
    --nx-link: #6FAF99;
    --nx-link-hover: #F2F0EA;
    --nx-overlay: rgba(11, 14, 16, 0.72);
    --nx-overlay-strong: rgba(11, 14, 16, 0.88);
    /* =========================================================
       STATES
       ========================================================= */

    --nx-success: #0F5B46;
    --nx-success-rgb: 15, 91, 70;
    --nx-success-soft: rgba(15, 91, 70, 0.16);
    --nx-success-border: rgba(15, 91, 70, 0.38);
    --nx-info: #2C4A6E;
    --nx-info-rgb: 44, 74, 110;
    --nx-info-soft: rgba(44, 74, 110, 0.16);
    --nx-info-border: rgba(44, 74, 110, 0.38);
    --nx-warning: #B38A46;
    --nx-warning-rgb: 179, 138, 70;
    --nx-warning-soft: rgba(179, 138, 70, 0.16);
    --nx-warning-border: rgba(179, 138, 70, 0.38);
    --nx-danger: #A85454;
    --nx-danger-rgb: 168, 84, 84;
    --nx-danger-soft: rgba(168, 84, 84, 0.16);
    --nx-danger-border: rgba(168, 84, 84, 0.38);
    /* =========================================================
       DIGITAL ACCENTS
       ========================================================= */

    --nx-accent: #6FAF99;
    --nx-accent-rgb: 111, 175, 153;
    --nx-accent-secondary: #6F88A8;
    --nx-accent-secondary-rgb: 111, 136, 168;
    --nx-glow-primary: rgba(15, 91, 70, 0.30);
    --nx-glow-secondary: rgba(44, 74, 110, 0.28);
    --nx-glow-accent: rgba(111, 175, 153, 0.24);
    /* =========================================================
       GRADIENTS
       ========================================================= */

    --nx-gradient-brand: linear-gradient( 135deg, var(--nx-primary) 0%, var(--nx-secondary) 100% );
    --nx-gradient-dark: linear-gradient( 135deg, var(--nx-bg-deep) 0%, var(--nx-graphite) 100% );
    --nx-gradient-surface: linear-gradient( 145deg, rgba(32, 37, 39, 0.98) 0%, rgba(26, 29, 31, 0.98) 100% );
    --nx-gradient-hero: radial-gradient( circle at 15% 20%, rgba(44, 74, 110, 0.22), transparent 38% ), radial-gradient( circle at 85% 75%, rgba(15, 91, 70, 0.22), transparent 40% ), linear-gradient( 135deg, var(--nx-bg-deep) 0%, var(--nx-graphite) 100% );
    --nx-gradient-card-hover: linear-gradient( 145deg, rgba(44, 74, 110, 0.16), rgba(15, 91, 70, 0.10) );
    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --nx-font-ar: "Tajawal", "Cairo", sans-serif;
    --nx-font-en: "Aeonik", "Inter", Arial, sans-serif;
    --nx-font-mono: "IBM Plex Mono", "Courier New", monospace;
    --nx-font-body: var(--nx-font-ar);
    --nx-font-heading: var(--nx-font-ar);
    --nx-font-weight-regular: 400;
    --nx-font-weight-medium: 500;
    --nx-font-weight-semibold: 600;
    --nx-font-weight-bold: 700;
    --nx-font-weight-extrabold: 800;
    --nx-text-xs: 0.75rem;
    --nx-text-sm: 0.875rem;
    --nx-text-base: 1rem;
    --nx-text-lg: 1.125rem;
    --nx-text-xl: 1.25rem;
    --nx-text-2xl: 1.5rem;
    --nx-text-3xl: 1.875rem;
    --nx-text-4xl: 2.25rem;
    --nx-text-5xl: 3rem;
    --nx-text-6xl: 3.75rem;
    --nx-line-tight: 1.15;
    --nx-line-heading: 1.25;
    --nx-line-normal: 1.65;
    --nx-line-relaxed: 1.85;
    --nx-letter-tight: -0.02em;
    --nx-letter-normal: 0;
    --nx-letter-wide: 0.04em;
    /* =========================================================
       SPACING SYSTEM
       ========================================================= */

    --nx-space-1: 0.25rem;
    --nx-space-2: 0.5rem;
    --nx-space-3: 0.75rem;
    --nx-space-4: 1rem;
    --nx-space-5: 1.25rem;
    --nx-space-6: 1.5rem;
    --nx-space-8: 2rem;
    --nx-space-10: 2.5rem;
    --nx-space-12: 3rem;
    --nx-space-16: 4rem;
    --nx-space-20: 5rem;
    --nx-space-24: 6rem;
    --nx-space-32: 8rem;
    /* =========================================================
       LAYOUT
       ========================================================= */

    --nx-container-sm: 720px;
    --nx-container-md: 960px;
    --nx-container-lg: 1200px;
    --nx-container-xl: 1320px;
    --nx-page-padding-mobile: 1rem;
    --nx-page-padding-tablet: 1.5rem;
    --nx-page-padding-desktop: 2rem;
    --nx-navbar-height: 72px;
    --nx-content-width: 1180px;
    --nx-reading-width: 780px;
    /* =========================================================
       RADIUS
       ========================================================= */

    --nx-radius-xs: 6px;
    --nx-radius-sm: 10px;
    --nx-radius-md: 16px;
    --nx-radius-lg: 22px;
    --nx-radius-xl: 30px;
    --nx-radius-pill: 999px;
    /* =========================================================
       SHADOWS
       ========================================================= */

    --nx-shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.12);
    --nx-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.18);
    --nx-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.24);
    --nx-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.34);
    --nx-shadow-primary: 0 18px 46px rgba(15, 91, 70, 0.24);
    --nx-shadow-secondary: 0 18px 46px rgba(44, 74, 110, 0.24);
    --nx-shadow-focus: 0 0 0 4px rgba(111, 175, 153, 0.18);
    /* =========================================================
       TRANSITIONS
       ========================================================= */

    --nx-transition-fast: 140ms ease;
    --nx-transition-base: 220ms ease;
    --nx-transition-slow: 360ms ease;
    --nx-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --nx-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
    /* =========================================================
       Z-INDEX
       ========================================================= */

    --nx-z-base: 1;
    --nx-z-sticky: 100;
    --nx-z-dropdown: 500;
    --nx-z-overlay: 900;
    --nx-z-modal: 1000;
    --nx-z-toast: 1100;
    /* =========================================================
       FORM CONTROLS
       ========================================================= */

    --nx-input-bg: var(--nx-surface-soft);
    --nx-input-bg-hover: var(--nx-surface-elevated);
    --nx-input-border: var(--nx-border);
    --nx-input-border-focus: var(--nx-accent);
    --nx-input-text: var(--nx-text);
    --nx-input-placeholder: var(--nx-text-muted);
    /* =========================================================
       COMPONENT TOKENS
       ========================================================= */

    --nx-button-height-sm: 38px;
    --nx-button-height-md: 46px;
    --nx-button-height-lg: 54px;
    --nx-card-bg: var(--nx-surface);
    --nx-card-bg-hover: var(--nx-surface-soft);
    --nx-card-border: var(--nx-border);
    --nx-card-border-hover: rgba(111, 175, 153, 0.34);
    --nx-badge-bg: rgba(15, 91, 70, 0.16);
    --nx-badge-text: #8CC6B2;
    --nx-badge-border: rgba(15, 91, 70, 0.34);
    --nx-divider: var(--nx-border-subtle);
    /* =========================================================
       BOOTSTRAP COMPATIBILITY
       ========================================================= */

    --bs-primary: var(--nx-primary);
    --bs-primary-rgb: var(--nx-primary-rgb);
    --bs-secondary: var(--nx-secondary);
    --bs-secondary-rgb: var(--nx-secondary-rgb);
    --bs-success: var(--nx-success);
    --bs-success-rgb: var(--nx-success-rgb);
    --bs-info: var(--nx-info);
    --bs-info-rgb: var(--nx-info-rgb);
    --bs-warning: var(--nx-warning);
    --bs-warning-rgb: var(--nx-warning-rgb);
    --bs-danger: var(--nx-danger);
    --bs-danger-rgb: var(--nx-danger-rgb);
    --bs-body-bg: var(--nx-bg);
    --bs-body-color: var(--nx-text);
    --bs-border-color: var(--nx-border);
    --bs-link-color: var(--nx-link);
    --bs-link-hover-color: var(--nx-link-hover);
    --bs-border-radius: var(--nx-radius-sm);
    --bs-border-radius-lg: var(--nx-radius-md);
    --bs-border-radius-xl: var(--nx-radius-lg);
}

/* =========================================================
   LANGUAGE FONT OVERRIDES
   ========================================================= */

html[lang="ar"],
html[dir="rtl"] {
    --nx-font-body: var(--nx-font-ar);
    --nx-font-heading: var(--nx-font-ar);
}

html[lang="en"],
html[dir="ltr"] {
    --nx-font-body: var(--nx-font-en);
    --nx-font-heading: var(--nx-font-en);
}

/* =========================================================
   GLOBAL FOUNDATION
   ========================================================= */

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-font-body);
    font-size: var(--nx-text-base);
    font-weight: var(--nx-font-weight-regular);
    line-height: var(--nx-line-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--nx-text);
    font-family: var(--nx-font-heading);
    font-weight: var(--nx-font-weight-bold);
    line-height: var(--nx-line-heading);
    letter-spacing: var(--nx-letter-tight);
}

p {
    color: var(--nx-text-soft);
}

a {
    color: var(--nx-link);
    transition: color var(--nx-transition-fast), opacity var(--nx-transition-fast);
}

    a:hover {
        color: var(--nx-link-hover);
    }

::selection {
    background: rgba(var(--nx-primary-rgb), 0.62);
    color: var(--nx-ivory);
}

:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 3px;
    box-shadow: var(--nx-shadow-focus);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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