/* Intelletto Design Tokens v5.0 — Light Dark Glass */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Tell browsers this UI is dark — fixes native <select>/<option>,
       scrollbars, form controls, date pickers, etc. Without this, on
       light-mode OSes Chrome/Safari render option popups with system
       colors (white bg + white text = invisible). */
    color-scheme: dark;

    /* === BASE === */
    --bg-base: #080b14;
    --bg-dark: #0e1320;
    --bg-darker: #050710;
    --surface: rgba(255,255,255,0.05);
    --surface-2: rgba(255,255,255,0.08);
    --surface-hover: rgba(255,255,255,0.10);
    --border-soft: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.15);
    --border-subtle: rgba(255,255,255,0.05);

    /* === BRAND PALETTE === */
    --color-primary: #4f86d9;
    --color-primary-dark: #356ab8;
    --color-primary-gradient: linear-gradient(135deg, #4f86d9 0%, #2d6ec3 100%);
    --color-secondary-gradient: linear-gradient(135deg, #38bdf8 0%, #3f88d7 100%);
    --color-accent: #2fb8a6;
    --color-success: #34d399;
    --color-success-bg: rgba(52, 211, 153, 0.10);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.10);
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.10);
    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.10);

    /* === DESKTOP BACKGROUND === */
    --desktop-bg:
        radial-gradient(ellipse 900px 600px at 15% 15%, rgba(79,134,217,.22) 0%, transparent 70%),
        radial-gradient(ellipse 700px 500px at 88% 12%, rgba(56,189,248,.14) 0%, transparent 65%),
        radial-gradient(ellipse 800px 600px at 65% 85%, rgba(47,184,166,.10) 0%, transparent 65%),
        linear-gradient(160deg, #030711 0%, #0a0f1e 50%, #050a14 100%);

    /* === GLASSMORPHISM (lighter) === */
    --glass-bg: rgba(14, 18, 30, 0.72);
    --glass-bg-hover: rgba(18, 22, 38, 0.78);
    --glass-bg-strong: rgba(10, 14, 24, 0.88);
    --glass-bg-subtle: rgba(255,255,255,0.03);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-light: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-inset: inset 0 1px 0 rgba(255,255,255,0.06);
    --glass-blur: 20px;
    --glass-blur-strong: 24px;

    /* === SHADOWS (lighter) === */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.40), 0 2px 10px rgba(0,0,0,0.20);
    --window-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.06);
    --glow-primary: 0 0 16px rgba(79, 134, 217, 0.34);
    --glow-soft: 0 0 24px rgba(79, 134, 217, 0.18);

    /* === TYPOGRAPHY === */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

    --text-main: #f1f5f9;
    --text-secondary: #c8d2e0;
    --text-muted: #8896a8;
    --text-faint: #4a5568;

    /* === LAYOUT === */
    --topbar-height: 42px;
    --taskbar-height: 62px;
    --window-radius: 14px;
    --window-header-height: 40px;
    --window-control-bg: rgba(255, 255, 255, 0.08);
    --window-control-bg-hover: rgba(255, 255, 255, 0.14);
    --window-control-border: rgba(255, 255, 255, 0.16);
    --window-control-glyph: rgba(236, 242, 255, 0.92);
    --window-control-close-bg: rgba(248, 113, 113, 0.16);
    --window-control-close-hover: rgba(248, 113, 113, 0.26);
    --window-control-close-border: rgba(248, 113, 113, 0.35);
    --window-control-close-glyph: #ffdfe3;
    --btn-radius: 10px;
    --card-radius: 12px;

    /* === Z-INDEX === */
    --z-desktop: 1;
    --z-window: 100;
    --z-topbar: 1000;
    --z-layer: 2000;
    --z-taskbar: 3000;
    --z-launcher: 4000;
    --z-overlay: 5000;
    --z-dialog: 6000;
    --z-login: 9000;

    /* === UI DENSITY + FONT SCALE ================================
       Two independent global multipliers:
       --ui-font-scale  → scales typography (--fs-*)
       --ui-density     → scales spacing (--space-*)
       Set via JS (NodeProfiles._applyRendering / AppearancePanel).
       Range: 0.75 → 1.5. Default 1 = normal.
       ============================================================ */
    --ui-density: 1;
    --ui-font-scale: 1;

    /* === SPACING SCALE =========================================
       Use these for ALL padding/margin/gap. Never hardcode px.
       Each token scales with --ui-density, so a single JS write
       can reflow the whole OS. Values at density=1:
       ============================================================ */
    --space-0: 0;
    --space-1: calc(4px  * var(--ui-density));  /*  4px */
    --space-2: calc(6px  * var(--ui-density));  /*  6px */
    --space-3: calc(8px  * var(--ui-density));  /*  8px */
    --space-4: calc(12px * var(--ui-density));  /* 12px */
    --space-5: calc(16px * var(--ui-density));  /* 16px */
    --space-6: calc(20px * var(--ui-density));  /* 20px */
    --space-7: calc(24px * var(--ui-density));  /* 24px */
    --space-8: calc(32px * var(--ui-density));  /* 32px */
    --space-9: calc(48px * var(--ui-density));  /* 48px */

    /* === FONT-SIZE SCALE =======================================
       Use --fs-* for font sizes. --text-* are COLORS (see below).
       Scales independently with --ui-font-scale.
       ============================================================ */
    --fs-xs:  calc(11px * var(--ui-font-scale));
    --fs-sm:  calc(12px * var(--ui-font-scale));
    --fs-md:  calc(13px * var(--ui-font-scale));  /* base */
    --fs-lg:  calc(14px * var(--ui-font-scale));
    --fs-xl:  calc(16px * var(--ui-font-scale));
    --fs-2xl: calc(18px * var(--ui-font-scale));
    --fs-3xl: calc(22px * var(--ui-font-scale));
    --fs-4xl: calc(28px * var(--ui-font-scale));

    /* === RADIUS SCALE ==========================================
       For border-radius. Do not hardcode px.
       ============================================================ */
    --r-xs:  4px;
    --r-sm:  6px;
    --r-md:  8px;
    --r-lg:  10px;
    --r-xl:  12px;
    --r-2xl: 16px;
    --r-full: 9999px;

    /* === ANIMATIONS === */
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
}

/* === LIGHT THEME (future) === */
[data-theme="dark"] {
    --window-control-bg: linear-gradient(180deg, rgba(27, 34, 52, 0.96) 0%, rgba(19, 25, 40, 0.96) 100%);
    --window-control-bg-hover: linear-gradient(180deg, rgba(44, 56, 82, 0.98) 0%, rgba(33, 44, 68, 0.98) 100%);
    --window-control-border: rgba(157, 175, 212, 0.24);
    --window-control-glyph: rgba(235, 242, 255, 0.95);
    --window-control-close-bg: linear-gradient(180deg, rgba(117, 33, 48, 0.95) 0%, rgba(89, 24, 36, 0.95) 100%);
    --window-control-close-hover: linear-gradient(180deg, rgba(147, 41, 61, 0.98) 0%, rgba(118, 31, 48, 0.98) 100%);
    --window-control-close-border: rgba(255, 143, 157, 0.36);
    --window-control-close-glyph: #ffe3e6;
}

[data-theme="light"] {
    --bg-base: #f8fafc;
    --bg-dark: #f1f5f9;
    --bg-darker: #e2e8f0;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-strong: rgba(255, 255, 255, 0.96);
    --glass-bg-subtle: rgba(255, 255, 255, 0.50);
    --surface: rgba(15, 23, 42, 0.03);
    --surface-2: rgba(15, 23, 42, 0.05);
    --surface-hover: rgba(15, 23, 42, 0.08);
    
    /* Contrasted but soft accent borders (Subtle Indigo) */
    --border-soft: rgba(99, 102, 241, 0.16);
    --border-strong: rgba(99, 102, 241, 0.35);
    --border-subtle: rgba(99, 102, 241, 0.08);
    --glass-border: rgba(99, 102, 241, 0.20);
    --glass-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    
    --text-main: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    
    --desktop-bg:
        radial-gradient(ellipse 900px 600px at 14% 14%, rgba(224, 231, 255, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 700px 500px at 88% 10%, rgba(254, 226, 226, 0.5) 0%, transparent 66%),
        radial-gradient(ellipse 800px 600px at 62% 84%, rgba(204, 251, 241, 0.5) 0%, transparent 65%),
        linear-gradient(165deg, #f8fafc 0%, #f1f5f9 52%, #e2e8f0 100%);
        
    --window-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    --window-control-bg-hover: linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
    --window-control-border: rgba(99, 102, 241, 0.25);
    --window-control-glyph: #334155;
    --window-control-close-bg: linear-gradient(180deg, #fff1f1 0%, #ffdede 100%);
    --window-control-close-hover: linear-gradient(180deg, #ffe4e4 0%, #ffc8c8 100%);
    --window-control-close-border: rgba(208, 84, 84, 0.44);
    --window-control-close-glyph: #8f1f1f;
}

/* Global Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.30); }

[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.30); }

/* Utility Classes */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--text-main);
}
.glass-panel-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}
.hidden { display: none !important; }