/* Global Variables */
:root {
    /* Brand Colors */
    --color-primary: #4F46E5;
    /* Indigo 600 */
    --color-primary-dark: #4338CA;
    /* Indigo 700 */
    --color-secondary: #0EA5E9;
    /* Sky 500 */
    --color-accent: #10B981;
    /* Emerald 500 */

    /* Neutral Colors */
    --color-bg-body: #F9FAFB;
    /* Gray 50 */
    --color-bg-card: #FFFFFF;
    --color-text-main: #111827;
    /* Gray 900 */
    --color-text-muted: #6B7280;
    /* Gray 500 */
    --color-border: #E5E7EB;
    /* Gray 200 */

    /* Component Variables */
    --bg-header: rgba(255, 255, 255, 0.8);
    --bg-gradient-hero: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --bg-gradient-pros: linear-gradient(135deg, #ecfdf5, #d1fae5);
    --bg-gradient-cons: linear-gradient(135deg, #fef2f2, #fee2e2);
    --bg-gradient-purchase: linear-gradient(135deg, #fef3c7, #fcd34d);

    --bg-tag: #E0E7FF;
    --text-tag: #4338CA;

    --bg-table-stripe: rgba(0, 0, 0, 0.02);
    --bg-competitor-preview: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    --border-competitor-preview: #0ea5e9;
    --bg-competitor-img: #ffffff;
    --text-competitor-price: #b91c1c;
    --text-competitor-availability: #059669;

    --text-pros-title: #059669; /* Emerald 600 */
    --text-cons-title: #dc2626; /* Red 600 */

    /* Amazon Specific */
    --color-amazon-orange: #FF9900;
    --color-amazon-blue: #232F3E;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;

    /* Transitions */
    --transition-base: all 0.2s ease-in-out;
}

/* Dark Mode (System Preference) */
/* Dark Mode (System Preference) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-body: #111827;
        /* Gray 900 */
        --color-bg-card: #1F2937;
        /* Gray 800 */
        --color-text-main: #F9FAFB;
        /* Gray 50 */
        --color-text-muted: #9CA3AF;
        /* Gray 400 */
        --color-border: #374151;
        /* Gray 700 */

        --color-primary: #818CF8;
        /* Indigo 400 */
        --color-primary-dark: #A5B4FC;
        /* Indigo 300 */

        /* Dark Mode Components */
        --bg-header: rgba(31, 41, 55, 0.8);
        --bg-gradient-hero: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        --bg-gradient-pros: linear-gradient(135deg, #064e3b, #065f46);
        --bg-gradient-cons: linear-gradient(135deg, #7f1d1d, #991b1b);
        --bg-gradient-purchase: linear-gradient(135deg, #78350f, #92400e);

        --bg-tag: #374151;
        --text-tag: #A5B4FC;

        --bg-table-stripe: rgba(255, 255, 255, 0.05);
        --bg-competitor-preview: linear-gradient(135deg, #0c4a6e, #075985);
        --border-competitor-preview: #0284c7;
        --bg-competitor-img: #1e293b;
        --text-competitor-price: #fca5a5;
        --text-competitor-availability: #6ee7b7;

        --text-pros-title: #6EE7B7; /* Emerald 300 to stand out on dark green bg */
        --text-cons-title: #FCA5A5; /* Red 300 to stand out on dark red bg */
    }
}

/* Dark Mode (Manual Override) */
[data-theme="dark"] {
    --color-bg-body: #111827;
    /* Gray 900 */
    --color-bg-card: #1F2937;
    /* Gray 800 */
    --color-text-main: #F9FAFB;
    /* Gray 50 */
    --color-text-muted: #9CA3AF;
    /* Gray 400 */
    --color-border: #374151;
    /* Gray 700 */

    --color-primary: #818CF8;
    /* Indigo 400 */
    --color-primary-dark: #A5B4FC;
    /* Indigo 300 */

    /* Dark Mode Components */
    --bg-header: rgba(31, 41, 55, 0.8);
    --bg-gradient-hero: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    --bg-gradient-pros: linear-gradient(135deg, #064e3b, #065f46);
    --bg-gradient-cons: linear-gradient(135deg, #7f1d1d, #991b1b);
    --bg-gradient-purchase: linear-gradient(135deg, #78350f, #92400e);

    --bg-tag: #374151;
    --text-tag: #A5B4FC;

    --bg-table-stripe: rgba(255, 255, 255, 0.05);
    --bg-competitor-preview: linear-gradient(135deg, #0c4a6e, #075985);
    --border-competitor-preview: #0284c7;
    --bg-competitor-img: #1e293b;
    --text-competitor-price: #fca5a5;
    --text-competitor-availability: #6ee7b7;
    
    --text-pros-title: #6EE7B7;
    --text-cons-title: #FCA5A5;
}