// Neon Design System  -  Dark + Light Theme
// Aesthetic: futuristic-minimal, deep base, neon accents, glass surfaces.
// Master dark/light switch: Theme.dark-mode (set from Rust).
// When dark-mode=false, all tokens read from ThemeLight.

import { ThemeLight } from "theme_light.slint";

export global Theme {
    in-out property <bool> dark-mode: true;

    // Surfaces
    out property <color> bg-base:         dark-mode ? #0a0e17   : ThemeLight.bg-base;
    out property <color> bg-elevated:     dark-mode ? #111827   : ThemeLight.bg-elevated;
    out property <color> bg-surface:      dark-mode ? #1a2235   : ThemeLight.bg-surface;
    out property <color> bg-hover:        dark-mode ? #243044   : ThemeLight.bg-hover;
    out property <color> bg-selected:     dark-mode ? #1e2d4a   : ThemeLight.bg-selected;
    out property <color> bg-row-alt:      dark-mode ? #0f1625   : ThemeLight.bg-row-alt;
    out property <color> bg-overlay:      dark-mode ? #0a0e17e6 : ThemeLight.bg-overlay;
    out property <color> bg-glass:        dark-mode ? #11182788 : ThemeLight.bg-glass;
    out property <color> bg-tooltip:      dark-mode ? #1a2235   : ThemeLight.bg-tooltip;

    // Borders
    out property <color> border:          dark-mode ? #2a344a   : ThemeLight.border;
    out property <color> border-bright:   dark-mode ? #3a4660   : ThemeLight.border-bright;
    out property <color> border-focus:    dark-mode ? #00f0ff   : ThemeLight.border-focus;
    out property <color> border-glass:    dark-mode ? #ffffff15 : ThemeLight.border-glass;

    // Text
    out property <color> text-primary:    dark-mode ? #e2e8f0   : ThemeLight.text-primary;
    out property <color> text-muted:      dark-mode ? #94a3b8   : ThemeLight.text-muted;
    out property <color> text-dim:        dark-mode ? #64748b   : ThemeLight.text-dim;
    out property <color> text-inverse:    dark-mode ? #0a0e17   : ThemeLight.text-inverse;

    // Neon accents
    out property <color> neon-cyan:       dark-mode ? #00f0ff   : ThemeLight.neon-cyan;
    out property <color> neon-magenta:    dark-mode ? #ff2d95   : ThemeLight.neon-magenta;
    out property <color> neon-green:      dark-mode ? #00ff88   : ThemeLight.neon-green;
    out property <color> neon-purple:     dark-mode ? #8b5cf6   : ThemeLight.neon-purple;
    out property <color> neon-amber:      dark-mode ? #ffb020   : ThemeLight.neon-amber;
    out property <color> neon-red:        dark-mode ? #ff4455   : ThemeLight.neon-red;

    // Glow
    out property <color> glow-cyan:       dark-mode ? #00f0ff44 : ThemeLight.glow-cyan;
    out property <color> glow-magenta:    dark-mode ? #ff2d9544 : ThemeLight.glow-magenta;
    out property <color> glow-green:      dark-mode ? #00ff8844 : ThemeLight.glow-green;
    out property <color> glow-purple:     dark-mode ? #8b5cf644 : ThemeLight.glow-purple;

    // Semantic aliases
    out property <color> accent-primary:  neon-cyan;
    out property <color> accent-danger:   neon-red;
    out property <color> accent-success:  neon-green;
    out property <color> accent-warning:  neon-amber;
    out property <color> accent-info:     neon-purple;
    out property <color> text-link:       neon-cyan;
    out property <color> bg-danger-hover: dark-mode ? #2d1117 : ThemeLight.bg-danger-hover;

    // Hover variants for filled buttons
    out property <color> bg-primary-hover: dark-mode ? #00ccdd : #005588;

    // Typography
    out property <length> font-xs:   11px;
    out property <length> font-sm:   12px;
    out property <length> font-base: 13px;
    out property <length> font-lg:   15px;
    out property <length> font-xl:   18px;
    out property <length> font-2xl:  22px;
    out property <length> font-3xl:  28px;

    // Font families
    out property <string> font-sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
    out property <string> font-mono: "'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace";

    // Elevation (simulated via border)
    out property <length> elevation-flat:   0px;
    out property <length> elevation-low:    1px;
    out property <length> elevation-md:     2px;
    out property <length> elevation-high:   3px;

    // Spacing
    out property <length> sp-1:  4px;
    out property <length> sp-2:  8px;
    out property <length> sp-3:  12px;
    out property <length> sp-4:  16px;
    out property <length> sp-5:  20px;
    out property <length> sp-6:  24px;
    out property <length> sp-8:  32px;
    out property <length> sp-10: 40px;
    out property <length> sp-12: 48px;

    // Radius
    out property <length> radius-sm:   4px;
    out property <length> radius-md:   6px;
    out property <length> radius-lg:   8px;
    out property <length> radius-xl:   12px;
    out property <length> radius-full: 100px;

    // Shadows
    out property <length> shadow-blur-sm:   4px;
    out property <length> shadow-blur-md:   10px;
    out property <length> shadow-blur-lg:   20px;
    out property <length> shadow-offset-y:  2px;

    // Animation durations
    out property <duration> duration-fastest:  50ms;
    out property <duration> duration-faster:  100ms;
    out property <duration> duration-fast:    150ms;
    out property <duration> duration-normal:  200ms;
    out property <duration> duration-slow:    300ms;
    out property <duration> duration-slower:  400ms;
    out property <duration> duration-slowest: 500ms;

    // Transition durations
    out property <duration> transition-fast: 150ms;
    out property <duration> transition-base: 200ms;
    out property <duration> transition-slow: 300ms;
}

// Animation Presets
export global AnimationPresets {
    out property <duration> fade-in:     200ms;
    out property <duration> slide-up:    300ms;
    out property <duration> slide-down:  300ms;
    out property <duration> scale-in:    250ms;
    out property <duration> fade-out:    150ms;
    out property <duration> slide-out:   200ms;
    out property <duration> panel-slide: 150ms;
    out property <duration> hover-glow:  150ms;
    out property <duration> tab-switch:  100ms;
}
