/* CSS Custom Properties */
:root {
    --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

    /* Light Mode Palette */
    --bg-color-light: #f2f4f7;
    --bg-image-light: none;
    --text-color-light: #1d1d1f;
    --text-color-secondary-light: #6e6e73;
    --accent-color-light: #0056b3;
    --glass-bg-light: rgba(255, 255, 255, 0.95);
    --glass-border-light: rgba(0, 0, 0, 0.05);
    --shadow-color-light: rgba(0, 0, 0, 0.05);

    /* Dark Mode Palette */
    --bg-color-dark: #121212;
    --bg-image-dark: linear-gradient(120deg, #1a1a1a 0%, #121212 100%);
    --text-color-dark: #f5f5f7;
    --text-color-secondary-dark: #8e8e93;
    --accent-color-dark: #1A6DBF;
    --glass-bg-dark: rgba(30, 30, 30, 0.9);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --shadow-color-dark: rgba(0, 0, 0, 0.3);

    /* Universal Variables */
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow-md: 0 4px 6px var(--shadow-color);
    --transition-fluid: 0.3s ease;

    /* Active Theme Variables */
    --bg-color: var(--bg-color-light);
    --bg-image: var(--bg-image-light);
    --text-color: var(--text-color-light);
    --text-color-secondary: var(--text-color-secondary-light);
    --accent-color: var(--accent-color-light);
    --glass-bg: var(--glass-bg-light);
    --glass-border: var(--glass-border-light);
    --shadow-color: var(--shadow-color-light);

    --background: #f2f4f7;
    --foreground: #1d1d1f;
}

body {
    --bg-color: var(--bg-color-light);
    --bg-image: var(--bg-image-light);
    --text-color: var(--text-color-light);
    --text-color-secondary: var(--text-color-secondary-light);
    --accent-color: var(--accent-color-light);
    --glass-bg: var(--glass-bg-light);
    --glass-border: var(--glass-border-light);
    --shadow-color: var(--shadow-color-light);

    background-color: var(--bg-color);
    background-image: var(--bg-image);
    color: var(--text-color);
    font-family: var(--font-family-system);

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

body.dark,
.dark body {
    --bg-color: var(--bg-color-dark);
    --bg-image: var(--bg-image-dark);
    --text-color: var(--text-color-dark);
    --text-color-secondary: var(--text-color-secondary-dark);
    --accent-color: var(--accent-color-dark);
    --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);
    --shadow-color: var(--shadow-color-dark);

    --background: #121212;
    --foreground: #f5f5f7;
}