/**
 * CSS Variables - Design tokens for the application
 * Contains color palette, spacing, and typography variables.
 *
 * Dark mode is the default (applied on :root). Light mode is applied when
 * <html data-theme="light"> is set by static/js/theme.js.
 */

:root {
    /* Background colors */
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #272727;

    /* Text colors */
    --text-primary: #f1f1f1;
    --text-secondary: #aaaaaa;

    /* Accent colors */
    --accent-red: #ff0033;
    --accent-red-hover: #cc0029;
    --accent-red-light: #ff6b6b;

    /* Border colors */
    --border-color: #3f3f3f;

    /* Status colors */
    --success-green: #2ecc71;
    --error-red: #e74c3c;
    --info-blue: #3498db;

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

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    color-scheme: dark;
}

[data-theme="light"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-tertiary: #ececec;

    /* Text colors */
    --text-primary: #0f0f0f;
    --text-secondary: #606060;

    /* Accent colors */
    --accent-red: #e6002e;
    --accent-red-hover: #c00026;
    --accent-red-light: #ff5c7c;

    /* Border colors */
    --border-color: #dcdcdc;

    /* Status colors */
    --success-green: #1f9d55;
    --error-red: #d64541;
    --info-blue: #2b7bb9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);

    color-scheme: light;
}