/* Panda Project Page - CSS Variables & Dark Mode */

:root {
    --lavender: #D0D0D0;
    --lavender-light: #EBEBEB;
    --lavender-dark: #888888;
    --lavender-darker: #666666;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6b6b6b;
    --bg-white: #ffffff;
    --bg-light: #FAFAFA;
    --bg-section: #F5F5F5;
    --border-light: #E8E8E8;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] {
    --lavender: #888888;
    --lavender-light: #3a3a3a;
    --lavender-dark: #666666;
    --lavender-darker: #AAAAAA;
    --text-primary: #e8e8e8;
    --text-secondary: #b8b8b8;
    --text-muted: #989898;
    --bg-white: #1a1a1a;
    --bg-light: #1f1f1f;
    --bg-section: #232323;
    --border-light: #323232;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 0.3s ease !important;
    transition-delay: 0 !important;
}