/* ===========================================================================
   SENTINALFX — Redesigned Terminal Stylesheet
   Deep space violet theme · Side-panel navigation · Mobile-first responsive
   =========================================================================== */

/* ─── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    /* Background layers */
    --bg:           #05050d;
    --surface:      #0b0b17;
    --elevated:     #10101e;
    --elevated-2:   #171728;
    --elevated-3:   #1e1e32;
    --glass:        rgba(10, 10, 20, 0.88);
    --card-bg:      rgba(255, 255, 255, 0.028);

    /* Borders */
    --border:       rgba(255, 255, 255, 0.06);
    --border-md:    rgba(255, 255, 255, 0.10);
    --border-hi:    rgba(255, 255, 255, 0.18);
    --border-focus: rgba(124, 110, 248, 0.65);

    /* Primary accent - electric indigo/violet */
    --accent:       #7c6ef8;
    --accent-2:     #5b4de0;
    --accent-3:     #a89fff;
    --accent-dim:   rgba(124, 110, 248, 0.14);
    --accent-glow:  rgba(124, 110, 248, 0.35);
    --accent-glow2: rgba(124, 110, 248, 0.09);
    --accent-text:  #b3abff;

    /* Secondary - cyan glow for live data */
    --cyan:         #22d3ee;
    --cyan-dim:     rgba(34, 211, 238, 0.12);
    --cyan-glow:    rgba(34, 211, 238, 0.22);

    /* Amber — for warnings with more pop */
    --amber:        #f59e0b;
    --amber-dim:    rgba(245, 158, 11, 0.12);
    --amber-glow:   rgba(245, 158, 11, 0.25);

    /* Semantic */
    --profit:       #0fda8c;
    --profit-dim:   rgba(15, 218, 140, 0.12);
    --profit-glow:  rgba(15, 218, 140, 0.28);
    --loss:         #f0504e;
    --loss-dim:     rgba(240, 80, 78, 0.12);
    --loss-glow:    rgba(240, 80, 78, 0.28);
    --warn:         #f59e0b;
    --warn-dim:     rgba(245, 158, 11, 0.12);
    --warn-glow:    rgba(245, 158, 11, 0.22);

    /* Text */
    --text:         #f0eeff;
    --text-2:       #c8c4e8;
    --muted:        #7a75a0;
    --dim:          #44405e;

    /* Sidebar */
    --sidebar-w:    224px;
    --sidebar-w-collapsed: 60px;
    --topbar-h:     56px;

    /* Radius & Transitions */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --t:      0.15s ease;
    --t-slow: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Animation timing presets */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 1200px 800px at 5% -10%,  rgba(124, 110, 248, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 800px 600px  at 95% 115%, rgba(34,  211, 238, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse 600px 500px  at 50% 55%,  rgba(91,  77,  224, 0.035) 0%, transparent 65%),
        radial-gradient(ellipse 400px 300px  at 80% 20%,  rgba(15,  218, 140, 0.025) 0%, transparent 60%);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Selection color */
::selection {
    background: rgba(124, 110, 248, 0.38);
    color: #fff;
}
::-moz-selection {
    background: rgba(124, 110, 248, 0.38);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(124,110,248,0.22); border-radius: 6px; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover  { background: rgba(124,110,248,0.5); box-shadow: 0 0 10px rgba(124,110,248,0.35); }