/* ============================================
   Cloud-Init Generator - Themes
   ============================================ */

/* ============================================
   CSS Variables - Dark Theme (Default)
   ============================================ */

:root,
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d27;
    --bg-hover: rgba(255, 255, 255, 0.05);

    /* Text Colors */
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);

    /* Accent Colors */
    --accent-color: #d33592;
    --accent-hover: #e04da6;
    --accent-bg: rgba(211, 53, 146, 0.15);

    /* Status Colors */
    --success-color: #48bb78;
    --error-color: #f56565;
    --warning-color: #ed8936;
    --info-color: #4299e1;

    /* Code Block */
    --code-bg: #0d0f14;
    --code-text: #e2e8f0;

    /* Syntax Highlighting */
    --syntax-comment: #6b7280;
    --syntax-string: #48bb78;
    --syntax-number: #f6ad55;
    --syntax-keyword: #d33592;
    --syntax-property: #63b3ed;
    --syntax-punctuation: #9ca3af;
}

/* ============================================
   Light Theme
   ============================================ */

[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f7f8fa;
    --bg-hover: rgba(0, 0, 0, 0.04);

    /* Text Colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #a0aec0;

    /* Border Colors */
    --border-color: #e2e8f0;
    --border-hover: #cbd5e0;

    /* Accent Colors */
    --accent-color: #d33592;
    --accent-hover: #b82d7e;
    --accent-bg: rgba(211, 53, 146, 0.1);

    /* Status Colors */
    --success-color: #38a169;
    --error-color: #e53e3e;
    --warning-color: #dd6b20;
    --info-color: #3182ce;

    /* Code Block */
    --code-bg: #f7f8fa;
    --code-text: #2d3748;

    /* Syntax Highlighting */
    --syntax-comment: #718096;
    --syntax-string: #38a169;
    --syntax-number: #dd6b20;
    --syntax-keyword: #d33592;
    --syntax-property: #3182ce;
    --syntax-punctuation: #4a5568;
}

/* ============================================
   Theme Toggle
   ============================================ */

.theme-toggle {
    display: flex;
    align-items: center;
}

#themeToggle {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#themeToggle .icon-sun,
#themeToggle .icon-moon {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: all 0.3s ease;
}

/* Dark theme - show sun icon */
[data-theme="dark"] #themeToggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] #themeToggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Light theme - show moon icon */
[data-theme="light"] #themeToggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] #themeToggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ============================================
   YAML Syntax Highlighting
   ============================================ */

.yaml-output .comment {
    color: var(--syntax-comment);
    font-style: italic;
}

.yaml-output .key {
    color: var(--syntax-property);
}

.yaml-output .string {
    color: var(--syntax-string);
}

.yaml-output .number {
    color: var(--syntax-number);
}

.yaml-output .boolean {
    color: var(--syntax-keyword);
}

.yaml-output .null {
    color: var(--syntax-keyword);
}

.yaml-output .punctuation {
    color: var(--syntax-punctuation);
}

/* ============================================
   Additional Theme-specific Overrides
   ============================================ */

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Light theme select dropdown arrow */
[data-theme="light"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Light theme shadows */
[data-theme="light"] .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .toast {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}

/* Light theme header */
[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.9);
}

/* ============================================
   Theme Transition
   ============================================ */

html {
    transition: background-color 0.3s ease;
}

body,
.header,
.sidebar,
.panel,
.preview-section,
.preview-header,
.preview-content,
.preview-footer,
.modal-content,
.toast,
.input,
.select,
.textarea,
.btn {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}