/**
 * AI Scripty - Theme System
 *
 * Light and Dark theme definitions using CSS custom properties
 * Design: Warm neutrals with coral/terracotta accent (avoiding generic AI blue/purple)
 */

/* ============================================================================
   Light Theme (Default)
   ============================================================================ */

:root,
[data-theme="light"] {
    /* Background Colors - Warm Cream/White */
    --bg-primary: #FAF9F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F4F2;
    --bg-card: #FFFFFF;
    --bg-hover: #F0EFED;
    --bg-active: #EAE9E6;

    /* Text Colors */
    --text-primary: #1A1918;
    --text-secondary: #5C5A57;
    --text-muted: #8A8886;
    --text-inverse: #FFFFFF;

    /* Accent Colors - Warm Coral/Terracotta */
    --accent-primary: #E07A5F;
    --accent-hover: #D06A4F;
    --accent-active: #C05A3F;
    --accent-light: #FDF2EF;
    --accent-muted: rgba(224, 122, 95, 0.1);

    /* Secondary Accent - Sage Green */
    --accent-secondary: #81B29A;
    --accent-secondary-hover: #71A28A;
    --accent-secondary-light: #F0F7F4;

    /* Status Colors */
    --color-success: #81B29A;
    --color-success-light: #F0F7F4;
    --color-success-dark: #5A9178;

    --color-warning: #F2CC8F;
    --color-warning-light: #FFFBF0;
    --color-warning-dark: #D9A83D;

    --color-error: #E07A5F;
    --color-error-light: #FDF2EF;
    --color-error-dark: #C05A3F;

    --color-info: #7EB5D6;
    --color-info-light: #F0F7FB;
    --color-info-dark: #4A93BA;

    /* Border Colors */
    --border-color: #E5E4E2;
    --border-color-light: #F0EFED;
    --border-color-dark: #D5D4D2;

    /* Shadows - Soft Neumorphic */
    --shadow-xs: 0 1px 2px rgba(26, 25, 24, 0.04);
    --shadow-sm: 0 2px 4px rgba(26, 25, 24, 0.04), 0 1px 2px rgba(26, 25, 24, 0.06);
    --shadow-md: 0 4px 8px rgba(26, 25, 24, 0.04), 0 2px 4px rgba(26, 25, 24, 0.06);
    --shadow-lg: 0 8px 16px rgba(26, 25, 24, 0.06), 0 4px 8px rgba(26, 25, 24, 0.08);
    --shadow-xl: 0 16px 32px rgba(26, 25, 24, 0.08), 0 8px 16px rgba(26, 25, 24, 0.10);
    --shadow-2xl: 0 24px 48px rgba(26, 25, 24, 0.10), 0 12px 24px rgba(26, 25, 24, 0.12);

    /* Neumorphic shadows */
    --neu-shadow-raised: 0 4px 12px rgba(26, 25, 24, 0.08), 0 2px 4px rgba(26, 25, 24, 0.04);
    --neu-shadow-pressed: inset 0 2px 4px rgba(26, 25, 24, 0.08);
    --neu-shadow-hover: 0 6px 16px rgba(26, 25, 24, 0.10), 0 3px 6px rgba(26, 25, 24, 0.06);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.3);

    /* Overlay */
    --overlay-color: rgba(26, 25, 24, 0.5);
    --overlay-light: rgba(26, 25, 24, 0.3);

    /* Input specific */
    --input-bg: #FFFFFF;
    --input-border: #E5E4E2;
    --input-border-focus: var(--accent-primary);
    --input-placeholder: #A0A0A0;

    /* Sidebar */
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E5E4E2;
    --sidebar-item-hover: #F5F4F2;
    --sidebar-item-active: #FDF2EF;

    /* Code/Editor */
    --code-bg: #F8F8F8;
    --code-text: #1A1918;
    --code-comment: #8A8886;
    --code-keyword: #D73A49;
    --code-string: #22863A;
    --code-number: #005CC5;
}

/* ============================================================================
   Dark Theme
   ============================================================================ */

[data-theme="dark"] {
    /* Background Colors - Deep Charcoal with warm undertones */
    --bg-primary: #1A1918;
    --bg-secondary: #242322;
    --bg-tertiary: #2E2D2B;
    --bg-card: #282726;
    --bg-hover: #323130;
    --bg-active: #3C3A38;

    /* Text Colors */
    --text-primary: #F5F4F2;
    --text-secondary: #A8A6A3;
    --text-muted: #706E6B;
    --text-inverse: #1A1918;

    /* Accent Colors - Warmer coral for dark mode */
    --accent-primary: #F2A285;
    --accent-hover: #F4B29A;
    --accent-active: #F5C2AF;
    --accent-light: rgba(242, 162, 133, 0.15);
    --accent-muted: rgba(242, 162, 133, 0.1);

    /* Secondary Accent - Lighter sage */
    --accent-secondary: #9BC4AC;
    --accent-secondary-hover: #ABD4BC;
    --accent-secondary-light: rgba(155, 196, 172, 0.15);

    /* Status Colors - Adjusted for dark mode */
    --color-success: #9BC4AC;
    --color-success-light: rgba(155, 196, 172, 0.15);
    --color-success-dark: #81B29A;

    --color-warning: #F5D9A8;
    --color-warning-light: rgba(245, 217, 168, 0.15);
    --color-warning-dark: #F2CC8F;

    --color-error: #F2A285;
    --color-error-light: rgba(242, 162, 133, 0.15);
    --color-error-dark: #E07A5F;

    --color-info: #9AC8E0;
    --color-info-light: rgba(154, 200, 224, 0.15);
    --color-info-dark: #7EB5D6;

    /* Border Colors */
    --border-color: #3C3A38;
    --border-color-light: #323130;
    --border-color-dark: #4A4846;

    /* Shadows - Deeper for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.40);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.40), 0 12px 24px rgba(0, 0, 0, 0.45);

    /* Neumorphic shadows - Dark mode */
    --neu-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --neu-shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --neu-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.25);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(242, 162, 133, 0.4);

    /* Overlay */
    --overlay-color: rgba(0, 0, 0, 0.6);
    --overlay-light: rgba(0, 0, 0, 0.4);

    /* Input specific */
    --input-bg: #2E2D2B;
    --input-border: #3C3A38;
    --input-border-focus: var(--accent-primary);
    --input-placeholder: #706E6B;

    /* Sidebar */
    --sidebar-bg: #242322;
    --sidebar-border: #3C3A38;
    --sidebar-item-hover: #323130;
    --sidebar-item-active: rgba(242, 162, 133, 0.15);

    /* Code/Editor */
    --code-bg: #1E1D1C;
    --code-text: #F5F4F2;
    --code-comment: #706E6B;
    --code-keyword: #FF7B72;
    --code-string: #7EE787;
    --code-number: #79C0FF;
}

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

/* Smooth color transitions when switching themes */
html {
    transition:
        background-color var(--transition-slow),
        color var(--transition-slow);
}

body,
.card,
.btn,
.input,
.sidebar,
.header {
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}

/* ============================================================================
   System Preference Detection
   ============================================================================ */

/* Auto theme based on system preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Copy all dark theme variables here for auto-detection */
        --bg-primary: #1A1918;
        --bg-secondary: #242322;
        --bg-tertiary: #2E2D2B;
        --bg-card: #282726;
        --bg-hover: #323130;
        --bg-active: #3C3A38;
        --text-primary: #F5F4F2;
        --text-secondary: #A8A6A3;
        --text-muted: #706E6B;
        --text-inverse: #1A1918;
        --accent-primary: #F2A285;
        --accent-hover: #F4B29A;
        --accent-active: #F5C2AF;
        --accent-light: rgba(242, 162, 133, 0.15);
        --accent-muted: rgba(242, 162, 133, 0.1);
        --border-color: #3C3A38;
        --border-color-light: #323130;
        --border-color-dark: #4A4846;
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.30);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.35);
        --neu-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
        --overlay-color: rgba(0, 0, 0, 0.6);
        --input-bg: #2E2D2B;
        --input-border: #3C3A38;
        --sidebar-bg: #242322;
        --sidebar-border: #3C3A38;
        --sidebar-item-hover: #323130;
        --sidebar-item-active: rgba(242, 162, 133, 0.15);
    }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   High Contrast Mode Support
   ============================================================================ */

@media (prefers-contrast: high) {
    :root,
    [data-theme="light"] {
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #000000;
        --accent-primary: #C05A3F;
    }

    [data-theme="dark"] {
        --text-primary: #FFFFFF;
        --text-secondary: #CCCCCC;
        --border-color: #FFFFFF;
        --accent-primary: #FFB399;
    }
}