/* ChloeOS — Desktop Environment Theme
   Catppuccin Mocha base + trans pride accents */

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Variable.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Share Tech Mono';
    src: url('../fonts/ShareTechMono-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    /* Catppuccin Mocha base */
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
    --ctp-surface0: #313244;
    --ctp-surface1: #45475a;
    --ctp-surface2: #585b70;
    --ctp-overlay0: #6c7086;
    --ctp-overlay1: #7f849c;
    --ctp-text: #cdd6f4;
    --ctp-subtext0: #a6adc8;
    --ctp-subtext1: #bac2de;

    /* Trans pride accent colors */
    --accent-blue: #89b4fa;
    --accent-pink: #f5a9b8;
    --accent-white: #f5e0dc;
    --accent-blue-dim: #5b8cd4;
    --accent-pink-dim: #c47e8e;

    /* Semantic colors */
    --panel-bg: var(--ctp-crust);
    --desktop-bg: var(--ctp-base);
    --window-bg: var(--ctp-mantle);
    --window-border: var(--ctp-surface1);
    --window-title-bg: var(--ctp-surface0);
    --window-title-active: var(--accent-blue);
    --window-title-inactive: var(--ctp-surface1);
    --text-primary: var(--ctp-text);
    --text-secondary: var(--ctp-subtext0);
    --text-dim: var(--ctp-overlay1);
    --btn-close: #f38ba8;
    --btn-maximize: #a6e3a1;
    --btn-minimize: #f9e2af;
    --link-color: var(--accent-blue);
    --link-hover: var(--accent-pink);
    --selection-bg: rgba(137, 180, 250, 0.2);
    --scrollbar-thumb: var(--ctp-surface2);
    --scrollbar-track: var(--ctp-mantle);

    /* Terminal ANSI-ish accents (theme-aware) */
    --term-green: #a6e3a1;
    --term-yellow: #f9e2af;
    --term-red: #f38ba8;
    --term-flag-pink: #f5a9b8;
    --term-flag-blue: #89b4fa;
    --term-flag-white: #f5e0dc;

    /* Wallpaper patterns */
    --wp-color1: #1a1a2e;
    --wp-color2: #1e1e32;

    /* Sizing */
    --panel-height: 36px;
    --taskbar-height: 32px;
    --border-radius: 6px;
    --window-radius: 8px;
}

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

::selection {
    background: var(--selection-bg);
    color: var(--accent-white);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Comfortaa', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--ctp-crust);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ctp-overlay0);
}

#desktop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#desktop-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* Wallpaper: subtle grid pattern */
    background-color: var(--desktop-bg);
    background-image:
        radial-gradient(circle at 1px 1px, var(--ctp-surface0) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
}

/* Wallpaper variants */
#desktop-area.wp-dots {
    background-image:
        radial-gradient(circle at 1px 1px, var(--ctp-surface0) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
}

#desktop-area.wp-grid {
    background-image:
        linear-gradient(var(--ctp-surface0) 1px, transparent 1px),
        linear-gradient(90deg, var(--ctp-surface0) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
}

#desktop-area.wp-diagonal {
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 24px,
            var(--wp-color2) 24px,
            var(--wp-color2) 25px
        );
}

#desktop-area.wp-pride {
    background-image:
        linear-gradient(
            180deg,
            rgba(91, 206, 250, 0.04) 0%,
            rgba(91, 206, 250, 0.04) 20%,
            rgba(245, 169, 184, 0.04) 20%,
            rgba(245, 169, 184, 0.04) 40%,
            rgba(255, 255, 255, 0.03) 40%,
            rgba(255, 255, 255, 0.03) 60%,
            rgba(245, 169, 184, 0.04) 60%,
            rgba(245, 169, 184, 0.04) 80%,
            rgba(91, 206, 250, 0.04) 80%,
            rgba(91, 206, 250, 0.04) 100%
        ),
        radial-gradient(circle at 1px 1px, var(--ctp-surface0) 0.5px, transparent 0.5px);
    background-size: 100% 100%, 32px 32px;
}

/* Utility */
.hidden {
    display: none !important;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Monospace */
.mono {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
}