* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   GLOBAL DESIGN SYSTEM
========================================= */

:root {

    /* =====================================
       PRIMARY BRAND COLORS
    ===================================== */

    --color-primary-blue: #1e4ed8;
    --color-primary-green: #16a34a;
    --color-primary-yellow: #facc15;

    /* =====================================
       SEMANTIC COLORS
    ===================================== */

    --color-success: #1de968;
    --color-warning: #f59e0b;
    --color-danger: #ff3c3c;
    
    --color-info: #3b82f6;
    --color-neutral: #9ca3af;

    /* =====================================
       SURFACES
    ===================================== */

    --color-bg: #d9e7ece3;

    --color-surface: rgba(18, 20, 28, 0.78);
    --color-card: rgba(18, 20, 28, 0.72);

    --color-gray: #ffffffa4;
    --color-white: #ffffff;

    --color-shadyWhite: rgba(255, 255, 255, 0.199);

    /* =====================================
       TEXT
    ===================================== */

    --color-text: #0f172a;
    --color-text-white: #ffffffcd;
    --color-text-charcoal: #111;
    --color-text-gray: #3a4450;
    --color-text-active: rgba(0, 63, 42, 0.897);
    --color-text-primary: #00252e;
    --color-text-secondary: #455677;
    --color-text-muted: #cad2e0;

    /* =====================================
       BORDERS
    ===================================== */

    --color-border: rgba(0, 0, 0, 0.425);
    --color-border-lite: rgba(0, 0, 0, 0.265);
    --color-border-soft: rgba(0, 0, 0, 0.08);
    --color-border-dash: rgba(255, 255, 255, 0.281);
    --color-border-active: rgba(0, 29, 1, 0.603);

    /* =====================================
       ACCENT COLORS
    ===================================== */

    --color-green: #3aff44;
    --color-gold: #d4af37;
    --color-gold-bright: #f3d36a;

    /* =====================================
       GLASS EFFECTS
    ===================================== */
    --glass-accent: rgba(0, 255, 0, 0.2);

    --glass-bg: rgba(0, 0, 0, 0.315);
    --glass-bg-small: rgba(0, 0, 0, 0.082);
    --glass-bg-light: rgba(0, 0, 0, 0.1);
    --glass-bg-heavy: rgba(0, 0, 0, 0.52);

    --glass-blur-sm: 10px;
    --glass-blur-md: 12px;
    --glass-blur-lg: 14px;
    --glass-blur-xl: 18px;
    --glass-blur-xxl: 24px;

    /* =====================================
       RADIUS
    ===================================== */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-pill: 999px;

    /* =====================================
       SHADOWS
    ===================================== */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.22);
    --shadow-xl: 0 10px 35px rgba(0, 0, 0, 0.28);
    --shadow-2xl: 0 30px 80px rgba(0, 0, 0, 0.45);
    --shadow-gold: 0 10px 30px rgba(212, 175, 55, 0.25);

    /* =====================================
       GLOBAL SIZES
    ===================================== */

    --header-height: 68px;
}

/* =========================================
    BASE LAYOUT
========================================= */
html,
body,
section {
    width: 100%;
    min-height: 100%;

    /* =========================================================
   SCROLLBAR
========================================================= */

    scrollbar-width: thin;
    scrollbar-color: #134e27 transparent;
}

body::-webkit-scrollbar {
    width: thin;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    
    background: var(--color-bg);
    color: var(--color-text);

    overflow-x: hidden;
}

/* =========================================
    BACKGROUND LAYER
========================================= */
.bg-grid {
    position: fixed;
    inset: 0;

    background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 40px 40px;

    z-index: 0;
}

.bg-orb {
    position: fixed;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    filter: blur(120px);
    opacity: 0.25;

    z-index: 0;
}

.orb-gold {
    background: var(--color-primary-yellow);

    top: -100px;
    left: -100px;
}

.orb-blue {
    background: var(--color-primary-blue);

    bottom: -120px;
    right: -120px;
}

.orb-green {
    background: var(--color-primary-green);

    top: 40%;
    left: 60%;
}

/* =========================================
    MAIN SHELL
========================================= */
.workspace-shell {
    position: relative;

    z-index: 1;

    min-height: 100vh;
    min-width: 100vh;

    display: flex;
    flex-direction: column;
}

/* APP CONTAINER */
#app {
    flex: 1;

    display: flex;

    padding: 10px;
}

/* =========================================
    FOOTER
========================================= */
#footerArea {
    padding: 10px;

    text-align: center;

    font-size: 12px;
    color: var(--color-text-muted);
}

/* =========================================
    SUBSIDIARY THEME SYSTEM
    data-subsidiary=""
========================================= */
body[data-subsidiary="default"] {
    --color-primary-blue: #1e4ed8;
    --color-primary-green: #16a34a;
    --color-primary-yellow: #facc15;
}

body[data-subsidiary="ayaandistributors"] {
    --color-primary-blue: #2563eb;
    --color-primary-green: #059669;
    --color-primary-yellow: #eab308;
    
    --color-bg: #f1f5f9;
}