/* ========================================
   CSS Variables - Theme Colors
   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");

:root[data-theme="light"] {
    /* Backgrounds - Soft White */
    --bg-primary: #fafafa;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --bg-code: #f8f8f8;
    --bg-hover: #e8e8e8;

    /* Text - Soft Black */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #6a6a6a;
    --text-muted: #9a9a9a;

    /* Borders */
    --border-primary: #e0e0e0;
    --border-secondary: #d0d0d0;

    /* Accents */
    --accent-primary: #2a2a2a;
    --accent-hover: #3a3a3a;

    /* Links */
    --link-color: #2563eb;
    --link-hover: #1d4ed8;

    /* 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);

    /* Status Colors */
    --color-success: #10b981;
    --color-success-bg: #ecfdf5;
    --color-success-text: #166534;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #854d0e;
    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;
    --color-danger-text: #991b1b;
    --color-info: #3b82f6;
    --color-info-bg: #eff6ff;
    --color-info-text: #1e40af;
    --color-accent: #8b5cf6;
    --color-accent-bg: #f5f3ff;
    --color-accent-text: #6b21a8;
    --color-note: #6366f1;
    --color-note-bg: #fff7ed;
    --color-note-text: #9a3412;
}

:root[data-theme="dark"] {
    /* Backgrounds - Soft Black */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #333333;
    --bg-code: #252525;
    --bg-hover: #3a3a3a;

    /* Text - Brighter for readability */
    --text-primary: #ffffff;
    --text-secondary: #e8e8e8;
    --text-tertiary: #d0d0d0;
    --text-muted: #b0b0b0;

    /* Borders */
    --border-primary: #3a3a3a;
    --border-secondary: #4a4a4a;

    /* Accents */
    --accent-primary: #e5e5e5;
    --accent-hover: #f5f5f5;

    /* Links - Brighter blue for better contrast */
    --link-color: #7bb3ff;
    --link-hover: #a5cfff;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);

    /* Status Colors */
    --color-success: #34d399;
    --color-success-bg: #064e3b;
    --color-success-text: #6ee7b7;
    --color-warning: #fbbf24;
    --color-warning-bg: #78350f;
    --color-warning-text: #fde68a;
    --color-danger: #f87171;
    --color-danger-bg: #7f1d1d;
    --color-danger-text: #fca5a5;
    --color-info: #60a5fa;
    --color-info-bg: #1e3a5f;
    --color-info-text: #93c5fd;
    --color-accent: #a78bfa;
    --color-accent-bg: #2e1065;
    --color-accent-text: #c4b5fd;
    --color-note: #818cf8;
    --color-note-bg: #431407;
    --color-note-text: #fdba74;
}