/* Theme variables, colors, and design tokens */

/* ========================================
   RESET AND BASE STYLES
   ======================================== */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--secondary);
    margin: 0;
}

/* ========================================
   CSS VARIABLES
   ======================================== */

:root {
    /* ========================================
       BRAND COLORS
       ======================================== */

    --kai-primary: #f5a425;           /* Warm orange/amber - main brand color */
    --kai-primary-dark: #e89410;      /* Darker shade for hover states */
    --kai-primary-light: #f7b955;     /* Lighter shade for backgrounds */
    --kai-primary-lighter: #fef3e0;   /* Very light shade for subtle backgrounds */

    /* Legacy aliases for backward compatibility */
    --primary: #f5a425;
    --primary-dark: #e89410;
    --primary-light: #f7b955;
    --primary-lighter: #fef3e0;
    --accent-1: #f5a425;
    --accent-2: #ffd700;

    /* ========================================
       NEUTRAL COLORS
       ======================================== */

    --kai-black: #000000;             /* Pure black */
    --kai-white: #e8e8e8;             /* Soft off-white (reduced glare on dark backgrounds) */
    --kai-gray-900: #1a1a1a;          /* Nearly black */
    --kai-gray-800: #333333;          /* Dark gray */
    --kai-gray-700: #555555;          /* Medium-dark gray */
    --kai-gray-600: #777777;          /* Medium gray */
    --kai-gray-500: #999999;          /* Neutral gray */
    --kai-gray-400: #bbbbbb;          /* Medium-light gray */
    --kai-gray-300: #dddddd;          /* Light gray */
    --kai-gray-200: #eeeeee;          /* Very light gray */
    --kai-gray-100: #f9f9f9;          /* Nearly white */

    /* ========================================
       LAYOUT COLORS
       ======================================== */

    --secondary: #2f4550;      /* Dark blue-gray - for backgrounds, important UI */
    --tertiary: #68727d;       /* Medium gray - for selected/active states */
    --quaternary: #a7adba;     /* Light gray - for secondary buttons */

    /* ========================================
       KAI COLOR SYSTEM (for modules)
       ======================================== */

    --kai-color-primary: var(--kai-primary);
    --kai-color-accent: var(--kai-primary-light);
    --kai-color-success: var(--success);
    --kai-color-error: var(--error);
    --kai-color-warning: var(--warning);

    --kai-color-surface: var(--kai-gray-900);
    --kai-color-surface-elevated: var(--kai-gray-800);
    --kai-color-border: var(--kai-gray-700);

    --kai-color-text-primary: var(--kai-white);
    --kai-color-text-secondary: var(--kai-gray-400);
    --kai-color-text-tertiary: var(--kai-gray-500);

    /* ========================================
       TEXT COLORS
       ======================================== */

    --kai-text-primary: var(--kai-black);
    --kai-text-secondary: var(--kai-gray-700);

    /* Legacy aliases */
    --text-primary: #000000;
    --text-secondary: #555555;
    --text-tertiary: #888888;
    --text-muted: #aaaaaa;
    --text-pagetitle: #343a40;

    /* ========================================
       BACKGROUND COLORS
       ======================================== */

    --bg-light: #f9f9f9;
    --bg-lighter: #f0f4f8;
    --white: #ffffff;

    /* ========================================
       STATUS COLORS
       ======================================== */

    --error: #f44336;
    --warning: #ff9800;
    --success: #4caf50;

    /* ========================================
       UI ELEMENTS
       ======================================== */

    --border: #e0e0e0;

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --kai-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --kai-font-size-xs: 10px;
    --kai-font-size-sm: 12px;
    --kai-font-size-md: 14px;
    --kai-font-size-lg: 16px;
    --kai-font-size-xl: 18px;
    --kai-font-weight-normal: 400;
    --kai-font-weight-semibold: 600;
    --kai-font-weight-bold: 700;
    --kai-line-height: 1.5;
    --kai-letter-spacing: 1px;
    --kai-letter-spacing-wide: 0.5px;

    /* ========================================
       SPACING
       ======================================== */

    --kai-space-xs: 4px;
    --kai-space-sm: 8px;
    --kai-space-md: 12px;
    --kai-space-lg: 16px;
    --kai-space-xl: 20px;
    --kai-space-xxl: 24px;

    /* Compact spacing scale for dense config panels */
    --kai-space-compact-xs: 3px;
    --kai-space-compact-sm: 6px;
    --kai-space-compact-md: 8px;
    --kai-space-compact-lg: 12px;

    /* Legacy aliases */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ========================================
       BORDERS
       ======================================== */

    --kai-border-radius-sm: 4px;
    --kai-radius-sm: 4px;  /* Alias for modules */

    /* Legacy aliases */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-xxl: 20px;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* ========================================
       Z-INDEX HIERARCHY
       ======================================== */

    --z-dropdown: 100;
    --z-modal: 1000;
    --z-overlay: 10000;
    --z-menu: 100000;

    /* ========================================
       TRANSITIONS
       ======================================== */

    --kai-transition-fast: 0.2s ease;
    --kai-transition-normal: 0.3s ease;
    --kai-transition-slow: 0.4s ease-in-out;

    /* Legacy alias */
    --transition: 0.3s ease;
}

/* ========================================
   TYPOGRAPHY CLASSES
   ======================================== */

/* Subheaders - Section headings within panel content */
.kai-subheader {
    font-size: var(--kai-font-size-md);
    font-weight: var(--kai-font-weight-semibold);
    margin-bottom: var(--kai-space-sm);
    color: var(--kai-text-primary);
    display: flex;
    align-items: center;
}

/* Generic Labels - Regular text labels */
.kai-label {
    font-size: var(--kai-font-size-md);
    font-weight: var(--kai-font-weight-normal);
    color: var(--kai-text-primary);
    line-height: var(--kai-line-height);
}

/* Parameter Labels - Form field identifiers (uppercase) */
.kai-parameter-label {
    font-size: var(--kai-font-size-sm);
    font-weight: var(--kai-font-weight-semibold);
    text-transform: uppercase;
    color: var(--kai-text-secondary);
    letter-spacing: var(--kai-letter-spacing-wide);
    margin-bottom: var(--kai-space-xs);
    display: block;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Select/Dropdown Elements */
.kai-select {
    width: 100%;
    padding: 8px 10px;
    background: white;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.kai-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(245, 164, 37, 0.1);
}

.kai-select:disabled {
    background: var(--bg-light);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --kai-transition-fast: 0s;
        --kai-transition-normal: 0s;
        --kai-transition-slow: 0s;
        --transition: 0s;
    }
}