@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --heading-font: 'Inter', 'Maven Pro', sans-serif;
    --body-font: 'Inter', 'Maven Pro', sans-serif;
    --heading: 245 20% 13%;
    --body: 226 15% 27%;
    --border: 0 0% 88%;
    --base-h: 262;
    --base-s: 82%;
    --base-l: 63%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    --base-50: var(--base-h) var(--base-s) calc(var(--base-l) + 25%);
    --base-100: var(--base-h) var(--base-s) calc(var(--base-l) + 20%);
    --base-200: var(--base-h) var(--base-s) calc(var(--base-l) + 15%);
    --base-300: var(--base-h) var(--base-s) calc(var(--base-l) + 10%);
    --base-400: var(--base-h) var(--base-s) calc(var(--base-l) + 5%);
    --base-600: var(--base-h) var(--base-s) calc(var(--base-l) - 5%);
    --base-700: var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
    --base-800: var(--base-h) var(--base-s) calc(var(--base-l) - 15%);
    --base-900: var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
    --link-color-h: 262;
    --link-color-s: 82%;
    --link-color-l: 55%;
    --link-color: var(--link-color-h) var(--link-color-s) var(--link-color-l);
    --link-color-hover: var(--link-color-h) var(--link-color-s) 42%;
    --accent-h: 320;
    --accent-s: 78%;
    --accent-l: 60%;
    --accent-50: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 25%);
    --accent-100: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 20%);
    --accent-200: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 15%);
    --accent-300: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 10%);
    --accent-400: var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%);
    --accent: var(--accent-h) var(--accent-s) var(--accent-l);
    --accent-600: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%);
    --accent-700: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%);
    --accent-800: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 15%);
    --accent-900: var(--accent-h) var(--accent-s) calc(var(--accent-l) - 20%);
    --primary: 262 82% 63%;
    --secondary: 215 40% 32%;
    --success: 147 67% 47%;
    --danger: 360 78% 62%;
    --warning: 29 100% 63%;
    --info: 215 90% 58%;
    --dark: 220 40% 10%;
    --white: 0 0% 100%;
    --light-h: 225;
    --light-s: 26%;
    --light-l: 96%;
    --light-50: var(--light-h) var(--light-s) calc(var(--light-l) + 33%);
    --light-100: var(--light-h) var(--light-s) calc(var(--light-l) + 20%);
    --light-200: var(--light-h) var(--light-s) calc(var(--light-l) + 15%);
    --light-300: var(--light-h) var(--light-s) calc(var(--light-l) + 10%);
    --light-400: var(--light-h) var(--light-s) calc(var(--light-l) + 2%);
    --light: var(--light-h) var(--light-s) var(--light-l);
    --light-600: var(--light-h) var(--light-s) calc(var(--light-l) - 2%);
    --light-700: var(--light-h) var(--light-s) calc(var(--light-l) - 10%);
    --light-800: var(--light-h) var(--light-s) calc(var(--light-l) - 15%);
    --light-900: var(--light-h) var(--light-s) calc(var(--light-l) - 20%);
}

body {
    background: linear-gradient(135deg, #f5f3ff 0%, #fff1f2 50%, #eff6ff 100%);
    color: hsl(var(--body));
    font-family: var(--body-font);
}

a {
    color: hsl(var(--link-color));
}

a:hover {
    color: hsl(var(--link-color-hover));
}

.cmn--btn,
.btn--base,
.btn.btn--base,
.btn-primary,
.btn--primary,
.badge-primary {
    background-image: linear-gradient(120deg, #7e22ce, #ec4899, #2563eb);
    background-size: 200% 200%;
    color: #fff !important;
    border: none;
    box-shadow: 0 12px 30px rgba(126, 34, 206, 0.25);
}

.cmn--btn:hover,
.btn--base:hover,
.btn-primary:hover,
.btn--primary:hover {
    background-position: 100% 0;
    transform: translateY(-1px);
}

.bg--base,
.bg--primary,
.badge--primary {
    background-image: linear-gradient(135deg, #7e22ce, #2563eb);
    color: #fff;
}

.header,
.footer,
.breadcrumb {
    background: linear-gradient(135deg, #0f172a 0%, #111827 60%, #0b1220 100%);
    color: #e5e7eb;
}

.card,
.custom--card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    border-color: hsl(var(--border));
}

.bg--light {
    background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
}

.text--base,
.base--color {
    color: hsl(var(--base));
}