:root {
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    --honey-50: #fffbeb;
    --honey-100: #fef3c7;
    --honey-200: #fde68a;
    --honey-300: #fcd34d;
    --honey-400: #fbbf24;
    --honey-500: #f59e0b;
    --honey-600: #d97706;
    --honey-700: #b45309;
    --honey-800: #92400e;
    --honey-900: #78350f;
}

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

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

.bg-primary-600 {
    background-color: var(--primary-600);
}

.bg-primary-700 {
    background-color: var(--primary-700);
}

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

.hover\:bg-primary-600:hover {
    background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
    background-color: var(--primary-700);
}

.hover\:text-primary-600:hover {
    color: var(--primary-600);
}

.text-honey-500 {
    color: var(--honey-500);
}

.bg-honey-50 {
    background-color: var(--honey-50);
}

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

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

/* Critical CSS for above-the-fold content */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Skip navigation for accessibility */
.skip-nav {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #2563eb;
    color: white;
    padding: 8px;
    text-decoration: none;
    transition: top 0.3s;
    border-radius: 0 0 4px 4px;
}

.skip-nav:focus {
    top: 0;
}

/* --- Logo merge/fusion states for honeycomb hero --- */
.logo-merge-initial {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

.logo-merged {
    background: var(--honey-500, #f59e0b) !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 24px 0 rgba(245, 158, 11, 0.18);
    transition: background 0.18s cubic-bezier(.4, 1, .7, 1), border-radius 0.18s cubic-bezier(.4, 1, .7, 1), color 0.18s, box-shadow 0.18s;
    position: relative;
    z-index: 10;
}

.logo-merged span,
.logo-merged .menu-text,
.logo-merged .nav-link-text {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Central logo highlight (for central hex hover) --- */
.logo-central-highlight img,
.logo-central-highlight {
    transition: box-shadow 0.18s cubic-bezier(.4, 1, .7, 1), border-radius 0.18s cubic-bezier(.4, 1, .7, 1);
}