:root {
    /* Colors */


    --color-bg-secondary: #f8f8f8;
    --color-bg-tertiary: #fafafa;

    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-border: #e0e0e0;
    --color-border-hover: #b0b0b0;

    --color-error: #dc3545;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;

    /* Spacing & Layout */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;

    /* Effects */
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.2);
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-round: 50%;

    /* Brand Colors */
    --color-primary: #19bacf;
    /* Cyan/Teal main brand color */
    --color-primary-hover: #1495a6;
    /* Darker shade */
    --color-accent: gold;
    /* Accent/Gold */
    --color-accent-soft: rgba(249, 199, 71, 0.1);

    /* Common UI Colors */
    --color-text-primary: #333;
    --color-primary-blue: #007BFF;
    --color-white: #ffffff;
    --color-light-gray: #e6e6e6;
}

body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;

    line-height: 1.6;
}

body,
html {
    height: 100%;
}