/* variables.css */
:root {
    --color-orange: #f3be4e;
    --color-teal: #63b79d;
    --color-blue: #479cdc;
    --color-pink: #f7e6dc;
    --color-purple: #306eb9;
    --color-dark-grey: #6d6e72;
    --color-light-grey: #fefeff;
    --color-white: #ffffff;

    --primary-color: var(--color-blue);
    --secondary-color: var(--color-pink);
    --accent-color: var(--color-purple);

    --background-light: var(--color-light-grey);
    --background-medium: #f9f5f7;
    --text-dark: var(--color-dark-grey);
    --text-medium: #666;
    --border-light: #e8d5e3;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --spacing: 1rem;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}