/*
Theme Name: VietKhoiMinh Theme
Author: TGN Digital
Version: 1.0.0
*/

/* Root Global Fonts */
:root {
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Fira Sans', sans-serif;
    --font-serif: "Roboto", "Roboto Fallback";
    --font-sans: "Fira Sans", "Fira Sans Fallback";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Colors */
    --color-red-50: lab(96.5005% 4.18508 1.52328);
    --color-red-300: lab(76.5514% 36.422 15.5335);
    --color-red-400: lab(63.7053% 60.745 31.3109);
    --color-red-600: lab(48.4493% 77.4328 61.5452);
    --color-green-500: lab(70.5521% -66.5147 45.8073);
    --color-green-600: lab(59.0978% -58.6621 41.2579);

    --background: lab(98.8661% -.0120997 1.90746);
    --foreground: lab(7.21285% -.900991 -3.46672);
    --card: lab(100% 0 0);
    --card-foreground: lab(7.21285% -.900991 -3.46672);
    --popover: lab(100% 0 0);
    --popover-foreground: lab(7.21285% -.900991 -3.46672);
    --primary: lab(33.924% 19.9376 -63.4862);
    --primary-foreground: lab(98.84% .0000298023 -.0000119209);
    --secondary: lab(43.2092% 69.9546 47.3899);
    --secondary-foreground: lab(98.84% .0000298023 -.0000119209);
    --muted: lab(95.386% -.0118315 1.90759);
    --muted-foreground: lab(41.9902% -1.06397 -3.55529);
    --accent: lab(67.671% 12.005 72.8025);
    --accent-foreground: lab(7.21285% -.900991 -3.46672);
    --destructive: lab(48.4493% 77.4328 61.5452);
    --destructive-foreground: lab(98.84% .0000298023 -.0000119209);
    --border: lab(90.746% -.0115335 1.90781);
    --input: lab(90.746% -.0115335 1.90781);
    --ring: lab(33.924% 19.9376 -63.4862);
    --chart-1: lab(33.924% 19.9376 -63.4862);
    --chart-2: lab(43.2092% 69.9546 47.3899);
    --chart-3: lab(67.671% 12.005 72.8025);
    --chart-4: lab(22.5881% 18.2068 -52.8932);
    --chart-5: lab(55.5083% 53.7711 48.4342);
    --sidebar: lab(98.26% 0 0);
    --sidebar-foreground: lab(2.75381% 0 0);
    --sidebar-primary: lab(7.78201% -.0000149012 0);
    --sidebar-primary-foreground: lab(98.26% 0 0);
    --sidebar-accent: lab(96.52% -.0000298023 .0000119209);
    --sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
    --sidebar-border: lab(90.952% 0 -.0000119209);
    --sidebar-ring: lab(66.128% -.0000298023 .0000119209);

    --color-border: var(--border);

    /* Basic Colors */
    --color-black: #000;
    --color-white: #fff;

    /* Spacing */
    --spacing: .25rem;

    /* Container Sizes */
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-7xl: 80rem;

    /* Text Sizes */
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Letter Spacing */
    --tracking-tight: -.025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;

    /* Line Height */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Border Radius */
    --radius: .5rem;
    --radius-xs: .125rem;
    --radius-2xl: 1rem;

    /* Blur Effects */
    --blur-md: 12px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;

    /* Aspect Ratio */
    --aspect-video: 16/9;

    /* Animations */
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;

    /* Easing Functions */
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    /* Transitions */
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

    /* Font Families */
    --default-font-family: "Fira Sans", "Fira Sans Fallback", system-ui, -apple-system, sans-serif;
    --default-mono-font-family: var(--font-mono);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    background: var(--background);
    color: var(--foreground);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 600;
    line-height: 1.3;
}

/* Header Backdrop Filter Support */
@supports (backdrop-filter: blur(10px)) {
    .supports-\[backdrop-filter\]\:bg-background\/60 {
        background-color: rgba(var(--background) / 0.6);
    }
}

/* Custom Logo Styling */
.custom-logo {
    height: 3.5rem;
    width: auto;
}

/* Custom Utilities using CSS Variables */
/* Background Colors */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-card { background-color: var(--card); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-accent { background-color: var(--accent); }
.bg-destructive { background-color: var(--destructive); }
.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }

/* Background Colors with Opacity */
@supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }

    .bg-primary\/20 {
        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }

    .bg-secondary\/10 {
        background-color: color-mix(in oklab, var(--secondary) 10%, transparent);
    }

    .bg-secondary\/20 {
        background-color: color-mix(in oklab, var(--secondary) 20%, transparent);
    }

    .bg-accent\/10 {
        background-color: color-mix(in oklab, var(--accent) 10%, transparent);
    }

    .bg-accent\/20 {
        background-color: color-mix(in oklab, var(--accent) 20%, transparent);
    }

    .bg-primary\/5 {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }

    .bg-secondary\/5 {
        background-color: color-mix(in oklab, var(--secondary) 5%, transparent);
    }

    .bg-accent\/5 {
        background-color: color-mix(in oklab, var(--accent) 5%, transparent);
    }
}

/* Text Colors */
.text-background { color: var(--background); }
.text-foreground { color: var(--foreground); }
.text-card-foreground { color: var(--card-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-destructive { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-black { color: var(--color-black); }
.text-white { color: var(--color-white); }
.text-accent{ color: var(--accent); }

/* Border Colors */
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.ring-ring { --tw-ring-color: var(--ring); }

/* Hover States */
.hover\:bg-accent:hover { background-color: var(--accent); }
.hover\:text-accent-foreground:hover { color: var(--accent-foreground); }
.hover\:text-primary:hover { color: var(--primary); }

/* Text Sizes with Line Heights */
.text-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height); }
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl--line-height); }
.text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl--line-height); }
.text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl--line-height); }

/* Font Weights */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Font Families */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-heading { font-family: var(--font-secondary); }
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Letter Spacing */
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* Line Heights */
.leading-tight { 
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight); 
}
.leading-snug { line-height: var(--leading-snug); }

/* Max Width Containers */
.max-w-sm { max-width: var(--container-sm); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-2xl { max-width: var(--container-2xl); }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-4xl { max-width: var(--container-4xl); }
.max-w-5xl { max-width: var(--container-5xl); }
.max-w-7xl { max-width: var(--container-7xl); }

/* Transitions */
.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

/* Color Mix Utilities */
@supports (color: color-mix(in lab, red, red)) {
    .bg-card\/95 {
        background-color: color-mix(in oklab, var(--card) 95%, transparent);
    }
}

/* Gradient Text Utilities */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.from-primary {
    --tw-gradient-from: var(--primary);
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-foreground {
    --tw-gradient-via: var(--foreground);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

.via-secondary {
    --tw-gradient-via: var(--secondary);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

/* Gradient with Opacity Utilities */
@supports (color: color-mix(in lab, red, red)) {
    .from-primary\/20 {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 20%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-primary\/10 {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 10%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-primary\/5 {
        --tw-gradient-from: color-mix(in oklab, var(--primary) 5%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-secondary\/20 {
        --tw-gradient-from: color-mix(in oklab, var(--secondary) 20%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-secondary\/10 {
        --tw-gradient-from: color-mix(in oklab, var(--secondary) 10%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-secondary\/5 {
        --tw-gradient-from: color-mix(in oklab, var(--secondary) 5%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-accent\/20 {
        --tw-gradient-from: color-mix(in oklab, var(--accent) 20%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .via-primary\/20 {
        --tw-gradient-via: color-mix(in oklab, var(--primary) 20%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-primary\/10 {
        --tw-gradient-via: color-mix(in oklab, var(--primary) 10%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-secondary\/20 {
        --tw-gradient-via: color-mix(in oklab, var(--secondary) 20%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-secondary\/10 {
        --tw-gradient-via: color-mix(in oklab, var(--secondary) 10%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-secondary\/5 {
        --tw-gradient-via: color-mix(in oklab, var(--secondary) 5%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-accent\/20 {
        --tw-gradient-via: color-mix(in oklab, var(--accent) 20%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-accent\/10 {
        --tw-gradient-via: color-mix(in oklab, var(--accent) 10%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .via-accent\/5 {
        --tw-gradient-via: color-mix(in oklab, var(--accent) 5%, transparent);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    }

    .from-accent\/10 {
        --tw-gradient-from: color-mix(in oklab, var(--accent) 10%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .from-accent\/5 {
        --tw-gradient-from: color-mix(in oklab, var(--accent) 5%, transparent);
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .to-accent\/10 {
        --tw-gradient-to: color-mix(in oklab, var(--accent) 10%, transparent);
    }

    .to-accent\/5 {
        --tw-gradient-to: color-mix(in oklab, var(--accent) 5%, transparent);
    }

    .to-primary\/80 {
        --tw-gradient-to: color-mix(in oklab, var(--primary) 80%, transparent);
    }

    .to-primary\/10 {
        --tw-gradient-to: color-mix(in oklab, var(--primary) 10%, transparent);
    }

    .to-primary\/5 {
        --tw-gradient-to: color-mix(in oklab, var(--primary) 5%, transparent);
    }

    .to-secondary\/10 {
        --tw-gradient-to: color-mix(in oklab, var(--secondary) 10%, transparent);
    }

    .to-secondary\/5 {
        --tw-gradient-to: color-mix(in oklab, var(--secondary) 5%, transparent);
    }

    .to-primary {
        --tw-gradient-to: var(--primary);
    }

    .to-secondary {
        --tw-gradient-to: var(--secondary);
    }

    .border-primary\/20 {
        border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }

    .border-secondary\/20 {
        border-color: color-mix(in oklab, var(--secondary) 20%, transparent);
    }
}

.to-transparent {
    --tw-gradient-to: transparent;
}

.bg-clip-text {
    background-clip: text;
    -webkit-background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* Opacity Utilities */
.opacity-0 {
    opacity: 0;
}

.opacity-5 {
    opacity: 0.05;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:opacity-40 {
    opacity: 0.4;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

/* Transition Utilities */
.transition-all {
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

.duration-300 {
    transition-duration: 0.3s;
}

.duration-500 {
    transition-duration: 0.5s;
}

/* Group Hover Text Color */
.group:hover .group-hover\:text-primary {
    color: var(--primary);
}

/* Shadow Utilities */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Transform Utilities */
.hover\:-translate-y-2:hover {
    transform: translateY(-0.5rem);
}

/* Border Hover Utilities */
@supports (color: color-mix(in lab, red, red)) {
    .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
}

/* Height Utilities */
.h-9 {
    height: calc(var(--spacing) * 9);
}

/* Padding Utilities */
.px-3 {
    padding-inline: calc(var(--spacing) * 3);
}

.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}

.py-2 {
    padding-block: calc(var(--spacing) * 2);
}

/* Conditional Padding with :has() */
.has-\[\>svg\]\:px-3:has(> svg) {
    padding-inline: calc(var(--spacing) * 3);
}

/* Background Utilities */
.bg-transparent {
    background-color: transparent;
}

/* Border Width Utilities */
.border-2 {
    border-width: 2px;
}

/* Hover Background Utilities */
.hover\:bg-primary:hover {
    background-color: var(--primary);
}

/* Hover Text Color Utilities */
.hover\:text-primary-foreground:hover {
    color: var(--primary-foreground);
}

/* Hover Border Color Utilities */
.hover\:border-primary:hover {
    border-color: var(--primary);
}

/* Dark Mode Hover Utilities */
@supports (color: color-mix(in lab, red, red)) {
    .dark .dark\:hover\:bg-input\/50:hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
    }
}

/* Position Utilities */
.sticky {
    position: sticky;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0;
}

.top-0 {
    top: 0;
}

.top-20 {
    top: calc(var(--spacing) * 20);
}

.right-20 {
    right: calc(var(--spacing) * 20);
}

.bottom-10 {
    bottom: calc(var(--spacing) * 10);
}

.left-10 {
    left: calc(var(--spacing) * 10);
}

/* Z-Index Utilities */
.z-50 {
    z-index: 50;
}

.z-10 {
    z-index: 10;
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.w-80 {
    width: calc(var(--spacing) * 80);
}

.w-96 {
    width: calc(var(--spacing) * 96);
}

/* Height Utilities */
.h-80 {
    height: calc(var(--spacing) * 80);
}

.h-96 {
    height: calc(var(--spacing) * 96);
}

/* Border Radius Utilities */
.rounded-full {
    border-radius: 9999px;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

/* Blur Utilities */
.blur-3xl {
    filter: blur(64px);
}

.blur-2xl {
    filter: blur(40px);
}

/* Background with Opacity */
@supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
        background-color: color-mix(in oklab, var(--background) 95%, transparent);
    }
}

/* Backdrop Blur */
.backdrop-blur {
    backdrop-filter: blur(8px);
}

/* Backdrop Filter Support Query */
@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
    @supports (color: color-mix(in lab, red, red)) {
        .supports-\[backdrop-filter\]\:bg-background\/60 {
            background-color: color-mix(in oklab, var(--background) 60%, transparent);
        }
    }
}

/* Border Utilities */
.border {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

/* Shadow Utilities */
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Group Hover Background */
.group:hover .group-hover\:bg-primary {
    background-color: var(--primary);
}

/* Group Hover Text */
.group:hover .group-hover\:text-primary-foreground {
    color: var(--primary-foreground);
}

/* Dark Mode Background */
@supports (color: color-mix(in lab, red, red)) {
    .dark .dark\:bg-input\/30 {
        background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
}

/* Dark Mode Border */
.dark .dark\:border-input {
    border-color: var(--input);
}

/* Height Utilities */
.h-10 {
    height: calc(var(--spacing) * 10);
}

/* Border Radius Utilities */
.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

/* Padding Utilities */
.px-8 {
    padding-inline: calc(var(--spacing) * 8);
}

/* Hover Background with Opacity */
.hover\:bg-primary\/90:hover {
    background-color: rgba(34, 73, 183, 0.9);
}

@supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
    }
}

.hover\:bg-secondary\/90:hover {
    background-color: rgba(205, 0, 29, 0.9);
}

@supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-secondary\/90:hover {
        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
    }
}

.hover\:bg-white\/90:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-white\/90:hover {
        background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
}

/* Conditional Padding with :has() */
.has-\[\>svg\]\:px-4:has(> svg) {
    padding-inline: calc(var(--spacing) * 4);
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

/* Additional Padding Utilities */
.py-16 {
    padding-block: calc(var(--spacing) * 16);
}

.py-24 {
    padding-block: calc(var(--spacing) * 24);
}

/* Responsive Padding Utilities */
@media (min-width: 768px) {
    .md\:py-24 {
        padding-block: calc(var(--spacing) * 24);
    }

    .md\:py-20 {
        padding-block: calc(var(--spacing) * 20);
    }

    .md\:p-12 {
        padding: calc(var(--spacing) * 12);
    }

    .md\:text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--text-5xl--line-height);
    }
}

@media (min-width: 1024px) {
    .lg\:text-6xl {
        font-size: var(--text-6xl);
        line-height: var(--text-6xl--line-height);
    }
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* Gap Utilities */
.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.gap-4 {
    gap: calc(var(--spacing) * 4);
}

.gap-6 {
    gap: calc(var(--spacing) * 6);
}

.gap-8 {
    gap: calc(var(--spacing) * 8);
}

.gap-12 {
    gap: calc(var(--spacing) * 12);
}

/* Padding Utilities */
.p-6 {
    padding: calc(var(--spacing) * 6);
}

.p-8 {
    padding: calc(var(--spacing) * 8);
}

.p-12 {
    padding: calc(var(--spacing) * 12);
}

.py-6 {
    padding-block: calc(var(--spacing) * 6);
}

.py-12 {
    padding-block: calc(var(--spacing) * 12);
}

.py-20 {
    padding-block: calc(var(--spacing) * 20);
}

.px-6 {
    padding-inline: calc(var(--spacing) * 6);
}

/* Margin Utilities */
.mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
}

.mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
}

.mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
}

.mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
}

.mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
}

.mt-1 {
    margin-top: calc(var(--spacing) * 1);
}

.mt-4 {
    margin-top: calc(var(--spacing) * 4);
}

.mx-auto {
    margin-inline: auto;
}

/* Display Utilities */
.inline-block {
    display: inline-block;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* Grid Utilities */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Text Alignment */
.text-center {
    text-align: center;
}

/* Text Wrap */
.text-balance {
    text-wrap: balance;
}

/* Space Utilities */
.space-y-4 > * + * {
    margin-top: calc(var(--spacing) * 4);
}

/* Responsive Padding Utilities */
@media (min-width: 768px) {
    .md\:py-24 {
        padding-block: calc(var(--spacing) * 24);
    }
}

/* Hover Utilities */
@media (hover: hover) {
    .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }

    .hover\:border-secondary\/40:hover {
        border-color: color-mix(in lab, var(--secondary) 40%, transparent);
    }

    .hover\:border-secondary\/50:hover {
        border-color: color-mix(in oklab, var(--secondary) 50%, transparent);
    }

    .hover\:border-accent\/40:hover {
        border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    }

    .hover\:border-accent\/50:hover {
        border-color: color-mix(in oklab, var(--accent) 50%, transparent);
    }
}