// ═══════════════════════════════════════════════════════════════════
//  Neon Design System  –  Light Theme
// ═══════════════════════════════════════════════════════════════════
//
//  Light sibling of `theme.slint`. Cool pearl base (#f2f5fa) keeps
//  the same identity as dark (navy→slate family) while providing
//  high contrast for daytime use.
//
//  Neon accents are DARKENED (same hue, low lightness) so they read
//  as ink on the light background. The glow tokens become subtle
//  tinted fills.
//
// ═══════════════════════════════════════════════════════════════════

export global ThemeLight {
    // ── Surfaces ─────────────────────────────────────────────────
    out property <color> bg-base:         #f2f5fa;
    out property <color> bg-elevated:     #e8edf5;
    out property <color> bg-surface:      #ffffff;
    out property <color> bg-hover:        #dfe6f0;
    out property <color> bg-selected:     #c8d6eb;
    out property <color> bg-row-alt:      #eaeef5;
    out property <color> bg-overlay:      #0a0e1780;
    out property <color> bg-glass:        #f2f5fadd;
    out property <color> bg-tooltip:      #1a2235;

    // ── Borders ──────────────────────────────────────────────────
    out property <color> border:          #d0d8e5;
    out property <color> border-bright:   #a8b4c8;
    out property <color> border-focus:    #0088cc;
    out property <color> border-glass:    #00000015;

    // ── Text ─────────────────────────────────────────────────────
    out property <color> text-primary:    #1a2436;
    out property <color> text-muted:      #4a5a74;
    out property <color> text-dim:        #7890a8;
    out property <color> text-inverse:    #f2f5fa;

    // ── Neon accents (darkened for light bg) ─────────────────────
    out property <color> neon-cyan:       #0077aa;
    out property <color> neon-magenta:    #c41e6e;
    out property <color> neon-green:      #008855;
    out property <color> neon-purple:     #6d28d9;
    out property <color> neon-amber:      #b87000;
    out property <color> neon-red:        #cc2233;

    // ── Glow (tinted fill on light bg) ───────────────────────────
    out property <color> glow-cyan:       #0077aa22;
    out property <color> glow-magenta:    #c41e6e22;
    out property <color> glow-green:      #00885522;
    out property <color> glow-purple:     #6d28d922;

    // ── Semantic ─────────────────────────────────────────────────
    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: #fce4e4;
    out property <color> bg-primary-hover: #005588;
}

export global AnimationPresetsLight {
    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;
}
