:root {
    /* Brand Colors & Dikkhaloy Design Tokens */
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-secondary: #10B981;
    --bs-secondary-rgb: 16, 185, 129;
    --bs-body-font-family: 'Hind Siliguri', 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-bg: #F8FAFC;
    --bs-body-color: #0F172A;

    --color-primary: #4F46E5;
    --color-primary-hover: #4338CA;
    --color-primary-active: #3730A3;
    --color-primary-light: #EEF2FF;
    --color-primary-lighter: #F5F3FF;
    --color-primary-border: #C7D2FE;

    --color-accent: #7C3AED;
    --color-accent-hover: #6D28D9;
    --color-accent-light: #F3E8FF;

    --color-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --color-hero-gradient: radial-gradient(circle at 85% 15%, rgba(99, 102, 241, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%);
    --color-glow: rgba(99, 102, 241, 0.35);

    --color-success: #16a34a;
    --color-success-light: #d1fae5;
    --color-success-dark: #065f46;

    --color-danger: #dc2626;
    --color-danger-light: #fee2e2;
    --color-danger-dark: #991b1b;

    --color-warning: #f59e0b;
    --color-warning-light: #fffbeb;
    --color-warning-border: #fde68a;

    --color-info: #3b82f6;
    --color-info-light: #e0e7ff;

    --color-white: #ffffff;
    --color-navy: #0F172A;
    --color-navy-dark: #07162F;
    --color-gold: #F6CC61;

    --font-display: 'Hind Siliguri', 'Manrope', 'Inter', sans-serif;
    --font-body: 'Manrope', 'Hind Siliguri', 'Inter', sans-serif;

    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 1.5rem;

    --premium-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --premium-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --premium-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --premium-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

body {
    font-family: var(--font-display);
    background-color: #F8FAFC;
    color: #0F172A;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base Cards & Buttons */
.card {
    border: none;
    box-shadow: var(--premium-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--premium-shadow-md) !important;
}

.btn {
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-image: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

.btn-primary:active {
    background-color: var(--color-primary-active) !important;
}

/* Color utility classes */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.bg-primary-light {
    background-color: var(--color-primary-light) !important;
}

.bg-accent-light {
    background-color: var(--color-accent-light) !important;
}

.bg-success-light {
    background-color: var(--color-success-light) !important;
}

.bg-danger-light {
    background-color: var(--color-danger-light) !important;
}

.bg-warning-light {
    background-color: var(--color-warning-light) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-navy {
    color: var(--color-navy) !important;
}

.text-amber {
    color: var(--color-warning) !important;
}

.border-primary-light {
    border-color: var(--color-primary-border) !important;
}

.bg-brand-gradient {
    background: var(--color-gradient) !important;
}

/* Radius & Shadow Utilities */
.rounded-4 {
    border-radius: 1rem !important;
}

.rounded-5 {
    border-radius: 1.5rem !important;
}

.rounded-bottom-5 {
    border-bottom-left-radius: 1.75rem !important;
    border-bottom-right-radius: 1.75rem !important;
}

.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18) !important;
}

/* Line Clamp */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pulse Badge */
.pulse-badge {
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Gradient Text */
.text-gradient-gold {
    background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-primary {
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stat & Category Icon Badges */
.stat-icon-box {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    transition: transform 0.25s ease;
}

.card:hover .stat-icon-box {
    transform: scale(1.1);
}

/* Book 3D Cover Mockup */
.book-cover-mockup {
    width: 76px;
    height: 104px;
    border-radius: 6px 12px 12px 6px;
    position: relative;
    box-shadow: 4px 6px 16px rgba(15, 23, 42, 0.18), inset 4px 0 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease;
}

.card:hover .book-cover-mockup {
    transform: translateY(-4px) rotate(-1deg);
}

/* Interactive Quiz Option Buttons */
.quiz-option-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-color: #E2E8F0 !important;
    background-color: #FFFFFF !important;
}

.quiz-option-btn:hover:not(:disabled) {
    border-color: var(--color-primary-border) !important;
    background-color: var(--color-primary-lighter) !important;
    transform: translateX(4px);
}

/* =====================================================================
   FRACTIONAL UTILITIES (Accurately scaled half-steps)
   0.5 = 2px (0.125rem)
   1.5 = 6px (0.375rem)
   2.5 = 10px (0.625rem)
   3.5 = 14px (0.875rem)
   ===================================================================== */
.p-0\.5 {
    padding: 0.125rem !important;
}

.p-1\.5 {
    padding: 0.375rem !important;
}

.p-2\.5 {
    padding: 0.625rem !important;
}

.p-3\.5 {
    padding: 0.875rem !important;
}

.pt-0\.5 {
    padding-top: 0.125rem !important;
}

.pt-1\.5 {
    padding-top: 0.375rem !important;
}

.pt-2\.5 {
    padding-top: 0.625rem !important;
}

.pt-3\.5 {
    padding-top: 0.875rem !important;
}

.pb-0\.5 {
    padding-bottom: 0.125rem !important;
}

.pb-1\.5 {
    padding-bottom: 0.375rem !important;
}

.pb-2\.5 {
    padding-bottom: 0.625rem !important;
}

.pb-3\.5 {
    padding-bottom: 0.875rem !important;
}

.px-0\.5 {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.px-1\.5 {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

.px-2\.5 {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
}

.px-3\.5 {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
}

.py-0\.5 {
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

.py-3\.5 {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}

.mt-0\.5 {
    margin-top: 0.125rem !important;
}

.mt-1\.5 {
    margin-top: 0.375rem !important;
}

.mt-2\.5 {
    margin-top: 0.625rem !important;
}

.mb-0\.5 {
    margin-bottom: 0.125rem !important;
}

.mb-1\.5 {
    margin-bottom: 0.375rem !important;
}

.mb-2\.5 {
    margin-bottom: 0.625rem !important;
}

.ms-0\.5 {
    margin-left: 0.125rem !important;
}

.ms-1\.5 {
    margin-left: 0.375rem !important;
}

.ms-2\.5 {
    margin-left: 0.625rem !important;
}

.me-0\.5 {
    margin-right: 0.125rem !important;
}

.me-1\.5 {
    margin-right: 0.375rem !important;
}

.me-2\.5 {
    margin-right: 0.625rem !important;
}

.gap-0\.5 {
    gap: 0.125rem !important;
}

.gap-1\.5 {
    gap: 0.375rem !important;
}

.gap-2\.5 {
    gap: 0.625rem !important;
}

.gap-3\.5 {
    gap: 0.875rem !important;
}

/* 5-Column Grid Support (.col-lg-2-4 and .col-2.4) */
.col-2\.4 {
    flex: 0 0 auto !important;
    width: 20% !important;
}

.col-sm-2\.4 {
    flex: 0 0 auto !important;
    width: 20% !important;
}

@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }
}

/* Max width helpers */
.max-w-xs {
    max-width: 20rem;
}

.max-w-sm {
    max-width: 24rem;
}

.max-w-md {
    max-width: 30rem;
}

.max-w-lg {
    max-width: 40rem;
}

.max-w-xl {
    max-width: 48rem;
}

/* Sticky Glassmorphic Header */
.landing-header {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.landing-nav-link {
    font-weight: 600;
    font-size: 0.93rem;
    color: #334155 !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 9999px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.landing-nav-link:hover {
    color: var(--color-primary) !important;
    background: rgba(79, 70, 229, 0.08);
}

.landing-nav-link.active {
    color: var(--color-primary) !important;
    background: rgba(79, 70, 229, 0.12);
}

/* Landing Footer */
.landing-footer {
    background: #0B1329;
    color: #94A3B8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-footer a {
    color: #CBD5E1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.landing-footer a:hover {
    color: #F6CC61;
}

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    padding: 6px 8px 10px;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 10px;
    transition: all 0.2s ease;
    flex: 1;
}

.mobile-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 2px;
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    body {
        padding-bottom: 68px;
    }
}