// UI Variables
// -------------------

// These are the official UI variables that every UI theme should define.
// It allows other packages to match your theme.

// Overrides: pulsar/static/variables/ui-variables.less

// Text Colors
@text-color:           #d87093; // Palevioletred for main text
@text-color-subtle:    #e5a3b5; // Lighter pink for subtle text
@text-color-highlight: #ff77a8; // Brighter pink for highlights
@text-color-selected:  #d87093; // Hot pink for selected text

@text-color-info:    #c96385; // Dusty pink for info
@text-color-success: #ff69b4; // Hot pink for success
@text-color-warning: #ffb6c1; // Light pink for warning
@text-color-error:   #ff1493; // Deep pink for error

// Background colors
@background-color-info:    #ffd6e0;
@background-color-success: #ffb6c1;
@background-color-warning: #ffa6c9;
@background-color-error:   #ff85a2;

@background-color-highlight: lighten(@base-background-color, 3%);
@background-color-selected:  lighten(@base-background-color, 5%);
@app-background-color:       #ffefef; // Same as editor background

// Base colors
@base-background-color: #fff0f5; // Lavender blush for UI base
@base-border-color:     #ffd6e0; // Light pink for borders

// Component colors
@pane-item-background-color: #ffefef; // Light pink background for panes
@pane-item-border-color:     @base-border-color;

@input-background-color: #fff0f5; // Lavender blush for input
@input-border-color:     #ffd6e0; // Light pink border

@tool-panel-background-color: @base-background-color;
@tool-panel-border-color:     @base-border-color;

@inset-panel-background-color: #ffefef; // Light pink for inset panels
@inset-panel-border-color:     @base-border-color;

@panel-heading-background-color: #ffd6e0; // Pink header background
@panel-heading-border-color:     @base-border-color;

@overlay-background-color: #fff0f5; // Lavender blush for overlays
@overlay-border-color:     @base-border-color;

@button-text-color:                #fff0f5;
@button-background-color:          #ff69b4; // Hot pink for buttons
@button-background-color-hover:    #ff77a8; // Lighter pink on hover
@button-background-color-selected: #ff77a8; // Lighter pink when selected
@button-border-color:              #ff69b4; // Hot pink border

@tab-bar-background-color:    #ffe4e8; // Very light pink for tab bar
@tab-bar-border-color:        @base-border-color;
@tab-background-color:        #ffd6e0; // Light pink for inactive tabs
@tab-background-color-active: #ffefef; // White-pink for active tab
@tab-border-color:            @base-border-color;

@tree-view-background-color: #fff0f5; // Lavender blush for tree view
@tree-view-border-color:     @base-border-color;

// Site colors
@ui-site-color-1: #d45a88; // Darker pink (function color)
@ui-site-color-2: #ff69b4; // Hot pink (string color)
@ui-site-color-3: #e35a8f; // Medium pink (keyword color)
@ui-site-color-4: #ff77a8; // Bright pink (class color)
@ui-site-color-5: #c96385; // Dusty pink (constant color)

// Sizes
@font-size: 12px;
@input-font-size: 14px;

@disclosure-arrow-size: 12px;

@component-padding: 10px;
@component-icon-padding: 5px;
@component-icon-size: 16px;
@component-line-height: 25px;

@tab-height: 30px;

// Misc
@component-border-radius: 4px; // Slightly rounder corners
@font-family: 'OpenDyslexicM Nerd Font', sans-serif;