/* Path: Frontend/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%);

    --purple-100: hsl(263.08, 61.9%, 95.88%);
    --purple-200: hsl(264.71, 48.57%, 93.14%);
    --purple-300: hsl(266.44, 50.43%, 77.06%);
    --purple-400: hsl(259.47, 67.11%, 55.88%);
    --purple-500: hsl(261.9, 52.94%, 46.67%);
    --purple-600: hsl(267, 27%, 35%);
    --purple-700: hsl(266.4, 26.88%, 25.24%);
    --purple-800: hsl(266.4, 26.88%, 18.24%);

    --green-100: hsl(142.63, 100%, 94.71%);
    --green-200: hsl(142.63, 100%, 64.71%);
    --green-300: hsl(142.63, 100%, 44.71%);
    --green-400: hsl(142.63, 100%, 34.71%);
    --green-500: hsl(142.63, 100%, 24.71%);

    --blue-100: hsl(204 100% 94%);
    --blue-200: hsl(204 92% 84%);
    --blue-300: hsl(204 88% 64%);
    --blue-400: hsl(204 82% 54%);
    --blue-500: hsl(204 76% 48%);

    --teal-100: hsl(172 46% 90%);
    --teal-200: hsl(172 46% 74%);
    --teal-300: hsl(172 43% 57%);
    --teal-400: hsl(172 52% 46%);
    --teal-500: hsl(172 58% 38%);

    --orange-100: hsl(31 100% 92%);
    --orange-200: hsl(31 100% 79%);
    --orange-300: hsl(31 94% 66%);
    --orange-400: hsl(31 89% 57%);
    --orange-500: hsl(31 78% 47%);

    --red-100: hsl(359 46.6% 90.8%);
    --red-200: hsl(359 46.6% 70.8%);
    --red-300: hsl(359 46.6% 50.8%);
    --red-400: hsl(359 46.6% 40.8%);
    --red-500: hsl(359 46.6% 30.8%);

    --yellow-100: hsl(56.94, 100%, 90%);
    --yellow-200: hsl(56.94, 100%, 70%);
    --yellow-300: hsl(56.94, 100%, 50%);
    --yellow-400: hsl(56.94, 100%, 40%);
    --yellow-500: hsl(56.94, 100%, 30%);
}

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

    // Page Background
    --page-glow-primary: hsl(263 62% 96% / 0.9);
    --page-glow-secondary: hsl(142 100% 94% / 0.65);
    --page-gradient-start: hsl(40 25% 91%);
    --page-gradient-end: hsl(40 18% 87%);

    // Surface Tokens
    --surface-soft: hsl(40 25% 93% / 0.65);
    --surface-raised: hsl(40 25% 92% / 0.78);
    --surface-field: hsl(40 30% 95% / 0.85);
    --surface-field-focus: hsl(40 30% 97% / 0.95);
    --surface-accent-soft: hsl(263 62% 92% / 0.9);
    --surface-accent-emphasis: hsl(263 62% 88% / 0.95);
    --surface-panel: hsl(40 24% 95% / 0.9);
    --surface-panel-strong: hsl(40 18% 98% / 0.95);
    --surface-info: hsl(204 100% 96% / 0.95);
    --surface-info-emphasis: hsl(204 90% 88% / 0.95);
    --surface-info-soft-tint: color-mix(in srgb, var(--surface-info) 20%, white 80%);
    --surface-info-tint: color-mix(in srgb, var(--surface-info) 82%, white 18%);
    --surface-success: hsl(142 100% 96% / 0.95);
    --surface-success-emphasis: hsl(172 44% 83% / 0.95);
    --surface-success-tint: color-mix(in srgb, var(--surface-success) 72%, white 28%);
    --surface-warning: hsl(56.94 100% 94% / 0.95);
    --surface-warning-emphasis: hsl(56.94 100% 82% / 0.95);
    --surface-warning-tint: color-mix(in srgb, var(--surface-warning) 82%, white 18%);
    --surface-danger: hsl(359 46.6% 94% / 0.95);
    --surface-danger-emphasis: hsl(359 46.6% 86% / 0.95);
    --surface-danger-tint: color-mix(in srgb, var(--danger) 8%, var(--surface-panel));
    --surface-hero-start: hsl(172 38% 62%);
    --surface-hero-end: hsl(172 46% 50%);

    // Border Tokens
    --border-soft: hsl(40 18% 80% / 0.7);
    --border-strong: hsl(40 18% 80% / 0.85);
    --border-field: hsl(40 14% 76% / 0.95);
    --border-divider: hsl(40 14% 78% / 0.5);
    --border-info-soft: color-mix(in srgb, var(--info) 18%, transparent 82%);
    --border-info-strong: color-mix(in srgb, var(--info) 24%, transparent 76%);
    --border-info-emphasis: color-mix(in srgb, var(--border-soft) 72%, var(--info) 28%);
    --border-success-soft: color-mix(in srgb, var(--success-text) 22%, transparent 78%);
    --border-danger-soft: color-mix(in srgb, var(--danger) 28%, var(--border-soft));
    --border-danger-strong: color-mix(in srgb, var(--danger) 42%, var(--border-strong));

    // Elevation + Focus
    --shadow-elevated: 0 20px 45px hsl(40 15% 25% / 0.12);
    --shadow-soft: 0 12px 28px hsl(40 15% 25% / 0.08);
    --focus-ring-primary: hsl(263 62% 85% / 0.35);
    --focus-ring-primary-soft-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    --focus-ring-primary-shadow: 0 0 0 4px var(--focus-ring-primary);
    --focus-ring-info-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-info) 20%, transparent 80%);

    // On-accent / Overlay Tokens
    --text-on-accent: hsl(0 0% 100%);
    --text-on-accent-muted: hsl(0 0% 100% / 0.82);
    --text-accent-strong: hsl(266 40% 30%);
    --text-info-strong: hsl(204 70% 34%);
    --text-success-strong: hsl(172 55% 28%);
    --text-warning-strong: hsl(34 78% 28%);
    --text-danger-strong: hsl(359 44% 34%);
    --success-text: var(--text-success-strong);
    --warning-text: var(--text-warning-strong);
    --danger-text: var(--text-danger-strong);
    --text-danger-muted: color-mix(in srgb, var(--danger) 72%, var(--text-muted));
    --surface-overlay-soft: hsl(0 0% 100% / 0.14);
    --surface-overlay-strong: hsl(0 0% 100% / 0.2);
    --border-overlay: hsl(0 0% 100% / 0.28);

    // Radius Tokens
    --radius-sm: 0.9rem;
    --radius-md: 1rem;
    --radius-lg: 1.15rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.35rem;
    --radius-3xl: 1.5rem;
    --radius-pill: 999px;
    --radius-full: 9999px;

    // Action Tokens
    --action-primary-text: var(--gray-50);
    --action-primary-start: var(--purple-500);
    --action-primary-end: var(--primary);
    --action-primary-shadow: 0 12px 24px hsl(263 53% 45% / 0.24);
    --action-primary-shadow-hover: 0 16px 30px hsl(263 53% 45% / 0.3);

    // Accent
    --primary: var(--purple-400);
    --primary-hover: var(--purple-500);
    --secondary: var(--green-300);
    --secondary-hover: var(--green-200);
    --warning: var(--red-300);
    --warning-hover: var(--red-200);
    --info: var(--blue-400);
    --info-hover: var(--blue-500);
    --success: var(--teal-400);
    --success-hover: var(--teal-500);

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

    // Page Background
    --page-glow-primary: hsl(266 38% 16% / 0.34);
    --page-glow-secondary: hsl(172 42% 14% / 0.26);
    --page-gradient-start: hsl(266 16% 11%);
    --page-gradient-end: hsl(40 10% 8%);

    // Surface Tokens
    --surface-soft: hsl(266 12% 15% / 0.62);
    --surface-raised: hsl(266 12% 13% / 0.9);
    --surface-field: hsl(266 10% 18% / 0.94);
    --surface-field-focus: hsl(266 10% 21% / 0.98);
    --surface-accent-soft: hsl(266 22% 20% / 0.9);
    --surface-accent-emphasis: hsl(266 24% 26% / 0.9);
    --surface-panel: hsl(266 12% 15% / 0.92);
    --surface-panel-strong: hsl(266 12% 18% / 0.96);
    --surface-info: hsl(204 28% 18% / 0.92);
    --surface-info-emphasis: hsl(204 34% 26% / 0.9);
    --surface-info-soft-tint: color-mix(in srgb, var(--surface-info) 20%, white 80%);
    --surface-info-tint: color-mix(in srgb, var(--surface-info) 82%, white 18%);
    --surface-success: hsl(142 24% 17% / 0.92);
    --surface-success-emphasis: hsl(172 26% 24% / 0.9);
    --surface-success-tint: color-mix(in srgb, var(--surface-success) 72%, white 28%);
    --surface-warning: hsl(41 28% 18% / 0.92);
    --surface-warning-emphasis: hsl(38 32% 24% / 0.92);
    --surface-warning-tint: color-mix(in srgb, var(--surface-warning) 82%, white 18%);
    --surface-danger: hsl(359 22% 20% / 0.94);
    --surface-danger-emphasis: hsl(359 24% 26% / 0.94);
    --surface-danger-tint: color-mix(in srgb, var(--danger) 8%, var(--surface-panel));
    --surface-hero-start: hsl(172 32% 26%);
    --surface-hero-end: hsl(172 38% 20%);

    // Border Tokens
    --border-soft: hsl(266 10% 24% / 0.72);
    --border-strong: hsl(266 10% 26% / 0.9);
    --border-field: hsl(266 10% 30% / 0.95);
    --border-divider: hsl(266 10% 28% / 0.42);
    --border-info-soft: color-mix(in srgb, var(--info) 18%, transparent 82%);
    --border-info-strong: color-mix(in srgb, var(--info) 24%, transparent 76%);
    --border-info-emphasis: color-mix(in srgb, var(--border-soft) 72%, var(--info) 28%);
    --border-success-soft: color-mix(in srgb, var(--success-text) 22%, transparent 78%);
    --border-danger-soft: color-mix(in srgb, var(--danger) 28%, var(--border-soft));
    --border-danger-strong: color-mix(in srgb, var(--danger) 42%, var(--border-strong));

    // Elevation + Focus
    --shadow-elevated: 0 20px 45px hsl(0 0% 0% / 0.35);
    --shadow-soft: 0 12px 28px hsl(0 0% 0% / 0.22);
    --focus-ring-primary: hsl(263 62% 60% / 0.25);
    --focus-ring-primary-soft-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    --focus-ring-primary-shadow: 0 0 0 4px var(--focus-ring-primary);
    --focus-ring-info-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-info) 20%, transparent 80%);

    // On-accent / Overlay Tokens
    --text-on-accent: hsl(0 0% 100%);
    --text-on-accent-muted: hsl(0 0% 100% / 0.78);
    --text-accent-strong: hsl(266 68% 78%);
    --text-info-strong: hsl(204 78% 76%);
    --text-success-strong: hsl(172 60% 72%);
    --text-warning-strong: hsl(41 88% 76%);
    --text-danger-strong: hsl(359 72% 80%);
    --success-text: var(--text-success-strong);
    --warning-text: var(--text-warning-strong);
    --danger-text: var(--text-danger-strong);
    --text-danger-muted: color-mix(in srgb, var(--danger) 72%, var(--text-muted));
    --surface-overlay-soft: hsl(0 0% 100% / 0.08);
    --surface-overlay-strong: hsl(0 0% 100% / 0.14);
    --border-overlay: hsl(0 0% 100% / 0.16);

    // Action Tokens
    --action-primary-text: var(--gray-50);
    --action-primary-start: var(--purple-500);
    --action-primary-end: var(--primary);
    --action-primary-shadow: 0 12px 24px hsl(263 53% 20% / 0.4);
    --action-primary-shadow-hover: 0 16px 30px hsl(263 53% 18% / 0.48);

    // Accent
    --primary: var(--purple-300);
    --primary-hover: var(--purple-200);
    --secondary: var(--green-300);
    --secondary-hover: var(--green-200);
    --info: var(--blue-300);
    --info-hover: var(--blue-200);
    --success: var(--teal-300);
    --success-hover: var(--teal-200);

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