/* World Herb Library - Theme System */

/* Base Font Sizes */
:root {
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
}

/* Default Theme - Classic (Black & White) */
[data-theme="light"], :root {
    /* Primary Colors */
    --color-primary: #000000;
    --color-primary-hover: #1a1a1a;
    --color-primary-light: #333333;

    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-bg-hover: #F9FAFB;

    /* Text Colors */
    --color-text-primary: #000000;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #9CA3AF;
    --color-text-inverse: #FFFFFF;

    /* Border Colors */
    --color-border-primary: #E5E7EB;
    --color-border-secondary: #D1D5DB;
    --color-border-focus: #000000;

    /* Accent Colors */
    --color-accent: #059669;
    --color-accent-hover: #047857;
    --color-accent-light: #D1FAE5;

    /* Status Colors */
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-error: #EF4444;
    --color-error-bg: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-info: #3B82F6;
    --color-info-bg: #DBEAFE;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
    --color-primary: #FFFFFF;
    --color-primary-hover: #E5E7EB;
    --color-primary-light: #D1D5DB;

    --color-bg-primary: #111827;
    --color-bg-secondary: #1F2937;
    --color-bg-tertiary: #374151;
    --color-bg-hover: #1F2937;

    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-text-tertiary: #9CA3AF;
    --color-text-inverse: #111827;

    --color-border-primary: #374151;
    --color-border-secondary: #4B5563;
    --color-border-focus: #FFFFFF;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* Herbal Green Theme */
[data-theme="herbal"] {
    --color-primary: #059669;
    --color-primary-hover: #047857;
    --color-primary-light: #10B981;

    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F0FDF4;
    --color-bg-tertiary: #DCFCE7;
    --color-bg-hover: #F0FDF4;

    --color-text-primary: #064E3B;
    --color-text-secondary: #065F46;
    --color-text-tertiary: #047857;

    --color-border-primary: #BBF7D0;
    --color-border-secondary: #86EFAC;
    --color-border-focus: #059669;

    --color-accent: #8B5CF6;
    --color-accent-hover: #7C3AED;
    --color-accent-light: #EDE9FE;
}

/* Earth Tones Theme */
[data-theme="earth"] {
    --color-primary: #92400E;
    --color-primary-hover: #78350F;
    --color-primary-light: #B45309;

    --color-bg-primary: #FFFBEB;
    --color-bg-secondary: #FEF3C7;
    --color-bg-tertiary: #FDE68A;
    --color-bg-hover: #FEF3C7;

    --color-text-primary: #78350F;
    --color-text-secondary: #92400E;
    --color-text-tertiary: #B45309;

    --color-border-primary: #FDE68A;
    --color-border-secondary: #FCD34D;
    --color-border-focus: #92400E;

    --color-accent: #DC2626;
    --color-accent-hover: #B91C1C;
    --color-accent-light: #FEE2E2;
}

/* Ocean Blue Theme */
[data-theme="ocean"] {
    --color-primary: #0369A1;
    --color-primary-hover: #075985;
    --color-primary-light: #0EA5E9;

    --color-bg-primary: #F0F9FF;
    --color-bg-secondary: #E0F2FE;
    --color-bg-tertiary: #BAE6FD;
    --color-bg-hover: #E0F2FE;

    --color-text-primary: #0C4A6E;
    --color-text-secondary: #075985;
    --color-text-tertiary: #0369A1;

    --color-border-primary: #BAE6FD;
    --color-border-secondary: #7DD3FC;
    --color-border-focus: #0369A1;

    --color-accent: #7C3AED;
    --color-accent-hover: #6D28D9;
    --color-accent-light: #EDE9FE;
}

/* Purple Wisdom Theme */
[data-theme="wisdom"] {
    --color-primary: #7C3AED;
    --color-primary-hover: #6D28D9;
    --color-primary-light: #8B5CF6;

    --color-bg-primary: #FAF5FF;
    --color-bg-secondary: #F3E8FF;
    --color-bg-tertiary: #E9D5FF;
    --color-bg-hover: #F3E8FF;

    --color-text-primary: #581C87;
    --color-text-secondary: #6B21A8;
    --color-text-tertiary: #7E22CE;

    --color-border-primary: #E9D5FF;
    --color-border-secondary: #D8B4FE;
    --color-border-focus: #7C3AED;

    --color-accent: #DC2626;
    --color-accent-hover: #B91C1C;
    --color-accent-light: #FEE2E2;
}

/* Global Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Font Size Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* Font Weight Classes */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Smooth Transitions */
button, a, input, select, textarea {
    transition: all 0.2s ease;
}

/* Focus Styles */
*:focus {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Selection Color */
::selection {
    background-color: var(--color-accent-light);
    color: var(--color-text-primary);
}