/* Path: Store/src/styles/vars.scss */

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

    --gray-50: hsl(40 25% 85%);
    --gray-100: hsl(40 23% 80%);
    --gray-200: hsl(40 20% 77%);
    --gray-300: hsl(40 20% 70%);
    --gray-400: hsl(40 10% 50%);
    --gray-500: hsl(40 5% 40%);
    --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);
    --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-50);
    --text-muted: var(--gray-400);

    // 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);
}

// Breakpoints
$mobile-narrow: 519px;
$phablet: 640px;
$compact: 720px;
$mobile: 768px;
$wide: 880px;
$desktop-sm: 960px;
$desktop-md: 980px;
$tablet: 1024px;
$workspace: 1080px;
$desktop-lg: 1120px;
$desktop: 1440px;

// The Mixin: Now checks for MIN-width
@mixin respond($breakpoint) {
    @if $breakpoint == phablet {
        @media (min-width: $phablet) {
            @content;
        }
    } @else if $breakpoint == compact {
        @media (min-width: $compact) {
            @content;
        }
    } @else if $breakpoint == mobile {
        @media (min-width: $mobile) {
            @content;
        }
    } @else if $breakpoint == wide {
        @media (min-width: $wide) {
            @content;
        }
    } @else if $breakpoint == desktop-sm {
        @media (min-width: $desktop-sm) {
            @content;
        }
    } @else if $breakpoint == desktop-md {
        @media (min-width: $desktop-md) {
            @content;
        }
    } @else if $breakpoint == tablet {
        @media (min-width: $tablet) {
            @content;
        }
    } @else if $breakpoint == workspace {
        @media (min-width: $workspace) {
            @content;
        }
    } @else if $breakpoint == desktop-lg {
        @media (min-width: $desktop-lg) {
            @content;
        }
    } @else if $breakpoint == desktop {
        @media (min-width: $desktop) {
            @content;
        }
    }
}

@mixin respond-max($breakpoint) {
    @if $breakpoint == mobile-narrow {
        @media (max-width: $mobile-narrow) {
            @content;
        }
    }
}

@mixin text-smallest {
    font-size: 1rem;
    font-size: clamp(1rem, 0.9295774647887324rem + 0.300469483568075vw, 1.2rem);
    font-weight: 300;
}

@mixin text-smaller {
    font-size: 1.1rem;
    font-size: clamp(1.1rem, 0.959154929577465rem + 0.60093896713615vw, 1.5rem);
    font-weight: 300;
}

@mixin text-small {
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 0.9859154929577465rem + 1.1267605633802815vw, 2rem);
    font-weight: 300;
}

@mixin text-medium {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.147887323943662rem + 1.5023474178403755vw, 2.5rem);
    font-weight: 400;
}

@mixin text-large {
    font-size: 1.75rem;
    font-size: clamp(1.75rem, 1.3098591549295775rem + 1.8779342723004695vw, 3rem);
    font-weight: 400;
}

@mixin text-largest {
    font-size: 2rem;
    font-size: clamp(2rem, 1.295774647887324rem + 3.004694835680751vw, 4rem);
    font-weight: 400;
}
