/* variables.css */
:root {
    /* Colors */
    --primary-color: #0EB2BB; /* Teal */
    --primary-color-dark: #006666; /* Darker teal */
    --secondary-color: #007BFF; /* Blue */
    --secondary-color-dark: #004d4d; /* Darker blue */
    --background-light: #f5f5f5; /* Light background */
    --background-gradient: linear-gradient(135deg, #f5f5f5, #e0f7fa); /* Gradient */
    --highlight-color: #FFF455; /* Bright, high-contrast yellow */
    --highlight-hover: #FFC107; /* Rich amber for hover */
    --link-color: #0000EE; /* Blue link */
    --visited-link-color: #551A8B; /* Purple link */
    --error-color: #FF6347; /* Tomato red */
    --error-color-dark: #FF4500; /* Darker red */

    /* Text */
    --font-family: 'Roboto', sans-serif;
    --text-color: #333;
    --heading-color: var(--primary-color); /* Same as teal */

    /* Borders */
    --border-color: #ccc;
    --focus-border-color: var(--primary-color);

    /* Shadows */
    --box-shadow-light: 0px 4px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-medium: 0px 8px 20px rgba(0, 0, 0, 0.2);

    /* Radius */
    --border-radius-small: 5px;
    --border-radius-medium: 10px;

    /* Sizes */
    --max-container-width: 1300px;
    --chat-height: 60vh;
    --header-padding: 0px 20px;
    --input-padding: 12px;
    --button-padding: 12px 20px;

    /* Transitions */
    --transition-default: 0.3s ease;

    /* Password strength colors */
    --strength-weak: var(--error-color);
    --strength-medium: var(--highlight-hover); /* Orange */
    --strength-strong: #32cd32; /* Green - adding as new variable */

    /* Chart dimensions */
    --chart-height: 200px;
    --chart-margin: 10px;

    /* Badge styling */
    --badge-size: 20px;
    --badge-padding: 0 6px;
    --badge-font-size: 12px;

    /* Icon sizing */
    --duck-icon-size: 1.5em;
    --emoji-size: 1em;

    /* Nav sizing */
    --nav-item-size: 44px;   /* square dimension */
    --nav-font-size: 16px;
    --nav-padding: 0 16px;
}