/* ============================================
   IPDS-Pro Theme System
   CSS Custom Properties for Light & Dark modes
   ============================================ */

/* --- Light Theme (Default) --- */
:root {
    /* Core colors */
    --primary: #00acee;
    --primary-rgb: 0, 172, 238;
    --secondary: #60CAF4;
    --secondary-rgb: 96, 202, 244;
    --accent: #FCB023;
    --accent-rgb: 252, 176, 35;

    /* Surfaces */
    --bg: #ffffff;
    --card: #f9fafb;
    --border: #e5e7eb;

    /* Text */
    --text: #111827;
    --text-muted: #6b7280;
    --text-secondary: #4b5563;
    --text-on-primary: #ffffff;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
    --section-shadow: rgba(0, 0, 0, 0.06);
    --btn-shadow: rgba(0, 172, 238, 0.25);
    --btn-shadow-hover: rgba(0, 172, 238, 0.35);
    --input-shadow: rgba(0, 172, 238, 0.12);
    --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    --toast-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --input-focus: rgba(0, 172, 238, 0.15);

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-backdrop-blur: 8px;

    /* Toast */
    --toast-bg: #111827;
    --toast-text: #ffffff;

    /* Output */
    --output-gradient-start: #60CAF4;
    --output-gradient-end: #00acee;
    --output-box-bg: rgba(255, 255, 255, 0.95);

    /* Radio / Checkbox selected */
    --radio-selected-bg: rgba(0, 172, 238, 0.05);
    --radio-selected-border: #00acee;

    /* Checkbox selected */
    --checkbox-selected-bg: rgba(0, 172, 238, 0.05);
    --checkbox-selected-border: #00acee;

    /* Buttons */
    --btn-primary-gradient: linear-gradient(135deg, #60CAF4 0%, #00acee 100%);
    --btn-primary-shadow: 0 2px 8px rgba(0, 172, 238, 0.25);
    --btn-primary-shadow-hover: 0 6px 20px rgba(0, 172, 238, 0.35);
    --btn-primary-shadow-active: 0 1px 4px rgba(0, 172, 238, 0.2);
    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: #e5e7eb;
    --btn-accent-bg: #FCB023;

    /* Preset section */
    --preset-section-bg: linear-gradient(135deg, rgba(96, 202, 244, 0.1) 0%, rgba(0, 172, 238, 0.1) 100%);
    --preset-section-border: #60CAF4;

    /* Section number */
    --section-number-bg: #00acee;
    --section-number-color: #ffffff;

    /* Step dots */
    --step-dot-blue: #60CAF4;
    --step-dot-orange: #FCB023;

    /* Capsule */
    --capsule-gradient: linear-gradient(135deg, #60CAF4 0%, #00acee 50%, #60CAF4 100%);
    --capsule-shadow: 0 4px 20px rgba(0, 172, 238, 0.3), 0 0 60px rgba(0, 172, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --capsule-shine: rgba(255, 255, 255, 0.3);
    --capsule-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Error / Destructive */
    --error: #dc2626;
    --error-light: #fecaca;
    --error-bg: #fee2e2;

    /* Conditional input */
    --conditional-input-bg: rgba(0, 172, 238, 0.05);
    --conditional-input-border: #00acee;

    /* Aspect icon */
    --aspect-icon-bg: rgba(0, 172, 238, 0.1);

    /* Tab active */
    --tab-active-shadow: 0 4px 15px rgba(0, 172, 238, 0.3);

    /* Option selector */
    --option-hover-bg: rgba(0, 172, 238, 0.03);

    /* Modal option */
    --modal-option-selected-bg: rgba(0, 172, 238, 0.08);
    --modal-option-hover-bg: rgba(0, 172, 238, 0.03);

    /* Glow dot */
    --glow-dot-bg: #ffffff;

    /* Preset chip */
    --preset-chip-hover-bg: rgba(0, 172, 238, 0.05);

    /* Preset btn reset */
    --preset-btn-reset-color: #dc2626;
    --preset-btn-reset-border: #fecaca;
    --preset-btn-reset-hover-bg: #dc2626;

    /* Preset delete */
    --preset-delete-hover-bg: #fee2e2;
    --preset-delete-hover-color: #dc2626;

    /* Reset button */
    --reset-btn-bg: #dc2626;
    --reset-btn-color: #ffffff;

    /* Reset modal */
    --reset-modal-border: #dc2626;
    --reset-modal-title-color: #dc2626;

    /* Selection */
    --selection-bg: #00acee;
    --selection-color: #ffffff;
}

/* --- Dark Theme --- */
html[data-theme="dark"] {
    /* Core colors */
    --primary: #38bdf8;
    --primary-rgb: 56, 189, 248;
    --secondary: #7dd3fc;
    --secondary-rgb: 125, 211, 252;
    --accent: #fbbf24;
    --accent-rgb: 251, 191, 36;

    /* Surfaces */
    --bg: #0f172a;
    --card: #1e293b;
    --border: #334155;

    /* Text */
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --text-secondary: #cbd5e1;
    --text-on-primary: #0f172a;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --section-shadow: rgba(0, 0, 0, 0.2);
    --btn-shadow: rgba(56, 189, 248, 0.2);
    --btn-shadow-hover: rgba(56, 189, 248, 0.3);
    --btn-shadow-active: rgba(56, 189, 248, 0.15);
    --input-shadow: rgba(56, 189, 248, 0.15);
    --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --toast-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

    /* Inputs */
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-focus: rgba(56, 189, 248, 0.2);

    /* Modal */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-backdrop-blur: 12px;

    /* Toast */
    --toast-bg: #f8fafc;
    --toast-text: #0f172a;

    /* Output */
    --output-gradient-start: #7dd3fc;
    --output-gradient-end: #38bdf8;
    --output-box-bg: rgba(30, 41, 59, 0.95);

    /* Radio / Checkbox selected */
    --radio-selected-bg: rgba(56, 189, 248, 0.1);
    --radio-selected-border: #38bdf8;

    /* Checkbox selected */
    --checkbox-selected-bg: rgba(56, 189, 248, 0.1);
    --checkbox-selected-border: #38bdf8;

    /* Buttons */
    --btn-primary-gradient: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
    --btn-primary-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
    --btn-primary-shadow-hover: 0 6px 20px rgba(56, 189, 248, 0.35);
    --btn-primary-shadow-active: 0 1px 4px rgba(56, 189, 248, 0.2);
    --btn-secondary-bg: #1e293b;
    --btn-secondary-border: #334155;
    --btn-accent-bg: #fbbf24;

    /* Preset section */
    --preset-section-bg: linear-gradient(135deg, rgba(125, 211, 252, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
    --preset-section-border: #7dd3fc;

    /* Section number */
    --section-number-bg: #38bdf8;
    --section-number-color: #0f172a;

    /* Step dots */
    --step-dot-blue: #7dd3fc;
    --step-dot-orange: #fbbf24;

    /* Capsule */
    --capsule-gradient: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #7dd3fc 100%);
    --capsule-shadow: 0 4px 20px rgba(56, 189, 248, 0.3), 0 0 60px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --capsule-shine: rgba(255, 255, 255, 0.2);
    --capsule-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    /* Error / Destructive */
    --error: #f87171;
    --error-light: #7f1d1d;
    --error-bg: #450a0a;

    /* Conditional input */
    --conditional-input-bg: rgba(56, 189, 248, 0.1);
    --conditional-input-border: #38bdf8;

    /* Aspect icon */
    --aspect-icon-bg: rgba(56, 189, 248, 0.15);

    /* Tab active */
    --tab-active-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);

    /* Option selector */
    --option-hover-bg: rgba(56, 189, 248, 0.05);

    /* Modal option */
    --modal-option-selected-bg: rgba(56, 189, 248, 0.15);
    --modal-option-hover-bg: rgba(56, 189, 248, 0.05);

    /* Glow dot */
    --glow-dot-bg: #ffffff;

    /* Preset chip */
    --preset-chip-hover-bg: rgba(56, 189, 248, 0.1);

    /* Preset btn reset */
    --preset-btn-reset-color: #f87171;
    --preset-btn-reset-border: #7f1d1d;
    --preset-btn-reset-hover-bg: #f87171;

    /* Preset delete */
    --preset-delete-hover-bg: #450a0a;
    --preset-delete-hover-color: #f87171;

    /* Reset button */
    --reset-btn-bg: #f87171;
    --reset-btn-color: #0f172a;

    /* Reset modal */
    --reset-modal-border: #f87171;
    --reset-modal-title-color: #f87171;

    /* Selection */
    --selection-bg: #38bdf8;
    --selection-color: #0f172a;
}

/* --- System Dark Mode Fallback --- */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        /* Core colors */
        --primary: #38bdf8;
        --primary-rgb: 56, 189, 248;
        --secondary: #7dd3fc;
        --secondary-rgb: 125, 211, 252;
        --accent: #fbbf24;
        --accent-rgb: 251, 191, 36;

        /* Surfaces */
        --bg: #0f172a;
        --card: #1e293b;
        --border: #334155;

        /* Text */
        --text: #f8fafc;
        --text-muted: #94a3b8;
        --text-secondary: #cbd5e1;
        --text-on-primary: #0f172a;

        /* Shadows */
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
        --section-shadow: rgba(0, 0, 0, 0.2);
        --btn-shadow: rgba(56, 189, 248, 0.2);
        --btn-shadow-hover: rgba(56, 189, 248, 0.3);
        --btn-shadow-active: rgba(56, 189, 248, 0.15);
        --input-shadow: rgba(56, 189, 248, 0.15);
        --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        --toast-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

        /* Inputs */
        --input-bg: #1e293b;
        --input-border: #334155;
        --input-focus: rgba(56, 189, 248, 0.2);

        /* Modal */
        --modal-overlay: rgba(0, 0, 0, 0.7);
        --modal-backdrop-blur: 12px;

        /* Toast */
        --toast-bg: #f8fafc;
        --toast-text: #0f172a;

        /* Output */
        --output-gradient-start: #7dd3fc;
        --output-gradient-end: #38bdf8;
        --output-box-bg: rgba(30, 41, 59, 0.95);

        /* Radio / Checkbox selected */
        --radio-selected-bg: rgba(56, 189, 248, 0.1);
        --radio-selected-border: #38bdf8;

        /* Checkbox selected */
        --checkbox-selected-bg: rgba(56, 189, 248, 0.1);
        --checkbox-selected-border: #38bdf8;

        /* Buttons */
        --btn-primary-gradient: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
        --btn-primary-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
        --btn-primary-shadow-hover: 0 6px 20px rgba(56, 189, 248, 0.35);
        --btn-primary-shadow-active: 0 1px 4px rgba(56, 189, 248, 0.2);
        --btn-secondary-bg: #1e293b;
        --btn-secondary-border: #334155;
        --btn-accent-bg: #fbbf24;

        /* Preset section */
        --preset-section-bg: linear-gradient(135deg, rgba(125, 211, 252, 0.1) 0%, rgba(56, 189, 248, 0.1) 100%);
        --preset-section-border: #7dd3fc;

        /* Section number */
        --section-number-bg: #38bdf8;
        --section-number-color: #0f172a;

        /* Step dots */
        --step-dot-blue: #7dd3fc;
        --step-dot-orange: #fbbf24;

        /* Capsule */
        --capsule-gradient: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #7dd3fc 100%);
        --capsule-shadow: 0 4px 20px rgba(56, 189, 248, 0.3), 0 0 60px rgba(56, 189, 248, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        --capsule-shine: rgba(255, 255, 255, 0.2);
        --capsule-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

        /* Error / Destructive */
        --error: #f87171;
        --error-light: #7f1d1d;
        --error-bg: #450a0a;

        /* Conditional input */
        --conditional-input-bg: rgba(56, 189, 248, 0.1);
        --conditional-input-border: #38bdf8;

        /* Aspect icon */
        --aspect-icon-bg: rgba(56, 189, 248, 0.15);

        /* Tab active */
        --tab-active-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);

        /* Option selector */
        --option-hover-bg: rgba(56, 189, 248, 0.05);

        /* Modal option */
        --modal-option-selected-bg: rgba(56, 189, 248, 0.15);
        --modal-option-hover-bg: rgba(56, 189, 248, 0.05);

        /* Glow dot */
        --glow-dot-bg: #ffffff;

        /* Preset chip */
        --preset-chip-hover-bg: rgba(56, 189, 248, 0.1);

        /* Preset btn reset */
        --preset-btn-reset-color: #f87171;
        --preset-btn-reset-border: #7f1d1d;
        --preset-btn-reset-hover-bg: #f87171;

        /* Preset delete */
        --preset-delete-hover-bg: #450a0a;
        --preset-delete-hover-color: #f87171;

        /* Reset button */
        --reset-btn-bg: #f87171;
        --reset-btn-color: #0f172a;

        /* Reset modal */
        --reset-modal-border: #f87171;
        --reset-modal-title-color: #f87171;

        /* Selection */
        --selection-bg: #38bdf8;
        --selection-color: #0f172a;
    }
}

/* --- Smooth theme transition --- */
html {
    transition: background-color 0.3s, color 0.3s;
}