/* ========================================
   LUCIDE ICON SYSTEM
   Clean, minimal icons with brand styling
   ======================================== */

/* Base icon styling - targets both before and after Lucide renders */
[data-lucide],
.lucide {
    width: var(--icon-md);
    height: var(--icon-md);
    stroke-width: 1.75;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Icon size variants */
.icon-xs [data-lucide], [data-lucide].icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon-sm [data-lucide], [data-lucide].icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md [data-lucide], [data-lucide].icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg [data-lucide], [data-lucide].icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl [data-lucide], [data-lucide].icon-xl { width: var(--icon-xl); height: var(--icon-xl); }

/* Icon color variants */
.icon-primary [data-lucide], [data-lucide].icon-primary { color: var(--brand-primary-dark); }
.icon-muted [data-lucide], [data-lucide].icon-muted { color: var(--text-muted); }
.icon-dark [data-lucide], [data-lucide].icon-dark { color: var(--text-primary); }

/* Icon with background circle - warm, inviting feel */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.12) 0%, rgba(var(--brand-primary-rgb), 0.06) 100%);
    color: var(--brand-primary-dark);
    transition: all var(--transition-base);
}

.icon-circle [data-lucide] {
    width: var(--icon-md);
    height: var(--icon-md);
}

.icon-circle:hover {
    background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.2) 0%, rgba(var(--brand-primary-rgb), 0.1) 100%);
    transform: scale(1.05);
}

/* Icon circle variants */
.icon-circle-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.icon-circle-sm [data-lucide] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.icon-circle-lg {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
}

.icon-circle-lg [data-lucide] {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* Muted icon circle for secondary items */
.icon-circle-muted {
    background: var(--background-secondary);
    color: var(--text-secondary);
}

.icon-circle-muted:hover {
    background: var(--border-light);
}

/* Reset & Base Styles */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--background-secondary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

/* ========================================
   BACKGROUND PATTERNS
   ======================================== */

.bg-mesh {
    background-color: var(--background-secondary);
    background-image:
        radial-gradient(at 40% 20%, rgba(var(--brand-primary-rgb), 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(var(--brand-secondary-rgb), 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(var(--brand-primary-rgb), 0.06) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(var(--brand-secondary-rgb), 0.04) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(var(--brand-primary-rgb), 0.08) 0px, transparent 50%);
}

.bg-dots {
    background-image: radial-gradient(circle, var(--border-light) 1px, transparent 1px);
    background-size: 24px 24px;
}

.bg-gradient-hero {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-secondary) 100%);
}