/* Path: Frontend/src/styles/theme.scss */

:root {
    --transition-speed: 0.5s;
    --transition-ease: ease-in-out;

    --gray-50: hsl(40 25% 90%);
    --gray-100: hsl(40 23% 87%);
    --gray-200: hsl(40 20% 83%);
    --gray-300: hsl(40 20% 77%);
    --gray-400: hsl(40 10% 75%);
    --gray-500: hsl(40 5% 60%);
    --gray-600: hsl(40 5% 30%);
    --gray-700: hsl(40 5% 25%);
    --gray-800: hsl(40 5% 20%);
    --gray-900: hsl(40 5% 15%);

    --brown-300: hsl(27 39.2% 86.5%);
    --brown-400: hsl(27 39.2% 76.5%);
    --brown-500: hsl(27 39.2% 66.5%);
    --brown-600: hsl(27 39.2% 56.5%);
    --brown-700: hsl(27 39.2% 46.5%);
    --brown-800: hsl(27 39.2% 36.5%);

    --green-300: hsl(115 43.1% 70%);
    --green-400: hsl(115 43.1% 70%);
    --green-500: hsl(115 43.1% 60%);
    --green-600: hsl(115 43.1% 50%);
    --green-700: hsl(115 43.1% 40%);

    --red-500: hsl(359 46.6% 50.8%);
    --red-600: hsl(359 46.6% 40.8%);
}

:root {
    // Background and Text Colors
    --bg: var(--gray-50);
    --text: var(--gray-800);
    --text-muted: var(--gray-700);

    // Accent
    --primary: var(--brown-700);
    --primary-hover: var(--brown-800);
    --primary-text: var(--gray-50);

    --secondary: var(--green-500);
    --secondary-hover: var(--green-600);
    --warning: var(--red-500);
    --warning-hover: var(--red-600);

    // Typical Card Button Colors
    --bg-1: var(--gray-100);
    --bg-1-hover: var(--gray-200);

    --bg-2: var(--gray-200);
    --bg-2-hover: var(--gray-300);

    --bg-3: var(--gray-300);
    --bg-3-hover: var(--gray-400);

    --box-shadow: 0 8px 16px hsl(0 0% 0% / 0.1);
}

[data-color-scheme="dark"] {
    // Background and Text Colors
    --bg: var(--gray-900);
    --text: var(--gray-300);
    --text-muted: var(--gray-500);

    // Accent
    --primary: var(--brown-700);
    --primary-hover: var(--brown-600);
    --secondary: var(--green-700);
    --secondary-hover: var(--green-600);

    // Typical Card Button Colors
    --bg-1: var(--gray-800);
    --bg-1-hover: var(--gray-700);

    --bg-2: var(--gray-700);
    --bg-2-hover: var(--gray-600);

    --bg-3: var(--gray-600);
    --bg-3-hover: var(--gray-500);
}