/* styles/theme.css */

/* Import brand font */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

:root {
    /* Base colors that extend ComfyUI variables */
    --cf-text-primary: var(--input-text, #ffffff);
    --cf-text-secondary: var(--descrip-text, #999999);
    --cf-text-muted: #aaaaaa;

    /* Background colors */
    --cf-bg-primary: var(--comfy-menu-bg, #202020);
    --cf-bg-secondary: var(--comfy-input-bg, #303030);
    --cf-bg-tertiary: #333333;
    --cf-bg-hover: var(--comfy-menu-bg-hover, #404040);
    --cf-bg-input: var(--comfy-input-bg, #303030); /* Added explicit input */

    /* Border colors */
    --cf-border-color: var(--border-color, #444444);
    --cf-border-light: rgba(255, 255, 255, 0.1);
    --cf-border-dark: rgba(0, 0, 0, 0.2);

    /* Brand colors */
    --cf-brand-primary: #ff5722; /* Vibrant orange - represents control */
    --cf-brand-primary-dark: #e64a19; /* Added darker orange */
    --cf-brand-primary-light: rgba(255, 87, 34, 0.3); /* Added lighter orange */
    --cf-brand-secondary: #8bc34a; /* Fresh green - represents responsive control */
    --cf-brand-tertiary: #607d8b; /* Blue-grey - represents precision */

    /* Accent colors */
    --cf-accent-blue: #3498db;
    --cf-accent-blue-dark: #2a5885;
    --cf-accent-green: #4a6;
    --cf-accent-red: #d9534f;
    --cf-accent-red-dark: #a46;

    /* Status colors */
    --cf-status-success: rgb(100, 230, 100);
    --cf-status-error: rgb(230, 100, 100);
    --cf-status-warning: rgb(230, 180, 80);

    /* Link colors */
    --cf-link-color: #64b5f6;
    --cf-link-hover: #90caf9;

    /* Alpha backgrounds */
    --cf-bg-overlay: rgba(0, 0, 0, 0.5);
    --cf-bg-overlay-light: rgba(255, 255, 255, 0.05);
    --cf-bg-overlay-dark: rgba(0, 0, 0, 0.2);

    /* Brand fonts */
    --cf-brand-font: 'Rajdhani', 'Roboto Condensed', sans-serif;
}