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

: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);
}