/* --- RADIANT PEARL DESIGN SYSTEM TOKENS --- */
/* Core tokens extracted for shared library use */

:root {
    --pearl-primary: #012552;
    --pearl-secondary: #32C0E6;
    --pearl-accent: #8AB840;
    
    /* Semantic surface tokens */
    --pearl-surface: rgba(255, 255, 255, 0.95);
    --pearl-surface-opaque: #ffffff;
    --pearl-surface-hover: #ffffff;
    --pearl-border: rgba(0, 0, 0, 0.06);
    --pearl-border-hover: rgba(1, 37, 82, 0.2);
    --pearl-text-muted: #64748b;
    --pearl-shadow: rgba(1, 37, 82, 0.12);
    --pearl-shadow-hover: rgba(1, 37, 82, 0.18);
    --pearl-floating-border: rgba(255, 255, 255, 1);
    --pearl-navy-glow-border: rgba(1, 36, 82, 0.12);
    --pearl-navy-glow-border-hover: rgba(1, 36, 82, 0.2);
    --pearl-input-bg: #ffffff;
    --pearl-header-color: #012552;
    --pearl-text-primary: #0f172a;
    
    /* Glass pills */
    --pearl-glass-primary-bg: #01255225;
    --pearl-glass-primary-text: #012552;
    --pearl-glass-primary-border: #01255245;

    --pearl-glass-success-bg: #00803725;
    --pearl-glass-success-text: #008037;
    --pearl-glass-success-border: #00803745;

    --pearl-glass-warning-bg: #E4B12325;
    --pearl-glass-warning-text: #b45309;
    --pearl-glass-warning-border: #E4B12345;

    --pearl-glass-error-bg: rgba(205, 28, 24, 0.15);
    --pearl-glass-error-text: #CD1C18;
    --pearl-glass-error-border: rgba(205, 28, 24, 0.4);

    --pearl-glass-info-bg: #32C0E625;
    --pearl-glass-info-text: #1e6275;
    --pearl-glass-info-border: #32C0E645;

    --pearl-glass-neutral-bg: #f1f5f9;
    --pearl-glass-neutral-text: #64748b;
    --pearl-glass-neutral-border: #e2e8f0;

    /* Season chips */
    --pearl-season-fall-bg: #fef3c7;
    --pearl-season-fall-text: #92400e;
    --pearl-season-winter-bg: #dbeafe;
    --pearl-season-winter-text: #1e40af;
    --pearl-season-spring-bg: #dcfce7;
    --pearl-season-spring-text: #166534;
    --pearl-season-purple-bg: #f3e8ff;
    --pearl-season-purple-text: #7c3aed;
    --pearl-season-default-bg: #f1f5f9;
    --pearl-season-default-text: #64748b;
}

.theme-dark {
    --pearl-primary: #8AB840;
    --pearl-secondary: #32C0E6;
    --pearl-accent: #E4B123;

    /* Semantic surface tokens */
    --pearl-surface: rgba(17, 17, 17, 0.95);
    --pearl-surface-opaque: #111111;
    --pearl-surface-hover: #18181b;
    /* Translucent "mesh" surface — lets the page radiant glow show through cards/tables. */
    --pearl-mesh-surface: rgba(50, 192, 230, 0.03);
    --pearl-mesh-surface-strong: rgba(50, 192, 230, 0.05);
    --pearl-mesh-blur: blur(30px) saturate(150%);
    --pearl-border: rgba(255, 255, 255, 0.06);
    --pearl-border-hover: rgba(138, 184, 64, 0.35);
    --pearl-text-muted: #94a3b8;
    --pearl-shadow: rgba(0, 0, 0, 0.5);
    --pearl-shadow-hover: rgba(0, 0, 0, 0.65);
    --pearl-floating-border: rgba(255, 255, 255, 0.08);
    --pearl-navy-glow-border: rgba(255, 255, 255, 0.08);
    --pearl-navy-glow-border-hover: rgba(138, 184, 64, 0.2);
    --pearl-input-bg: #111111;
    --pearl-header-color: rgba(255, 255, 255, 0.95);
    --pearl-text-primary: rgba(255, 255, 255, 0.95);

    /* Glass pills in dark mode */
    --pearl-glass-primary-bg: rgba(138, 184, 64, 0.12);
    --pearl-glass-primary-text: #8AB840;
    --pearl-glass-primary-border: rgba(138, 184, 64, 0.25);

    --pearl-glass-success-bg: rgba(76, 175, 80, 0.12);
    --pearl-glass-success-text: #4CAF50;
    --pearl-glass-success-border: rgba(76, 175, 80, 0.25);

    --pearl-glass-warning-bg: rgba(228, 177, 35, 0.12);
    --pearl-glass-warning-text: #E4B123;
    --pearl-glass-warning-border: rgba(228, 177, 35, 0.25);

    --pearl-glass-error-bg: rgba(255, 110, 64, 0.12);
    --pearl-glass-error-text: #FF6E40;
    --pearl-glass-error-border: rgba(255, 110, 64, 0.25);

    --pearl-glass-info-bg: rgba(50, 192, 230, 0.12);
    --pearl-glass-info-text: #32C0E6;
    --pearl-glass-info-border: rgba(50, 192, 230, 0.25);

    --pearl-glass-neutral-bg: rgba(255, 255, 255, 0.05);
    --pearl-glass-neutral-text: #94a3b8;
    --pearl-glass-neutral-border: rgba(255, 255, 255, 0.08);

    /* Season chips in dark mode */
    --pearl-season-fall-bg: rgba(245, 158, 11, 0.15);
    --pearl-season-fall-text: #fbbf24;
    --pearl-season-winter-bg: rgba(59, 130, 246, 0.15);
    --pearl-season-winter-text: #60a5fa;
    --pearl-season-spring-bg: rgba(16, 185, 129, 0.15);
    --pearl-season-spring-text: #34d399;
    --pearl-season-purple-bg: rgba(139, 92, 246, 0.15);
    --pearl-season-purple-text: #a78bfa;
    --pearl-season-default-bg: rgba(255, 255, 255, 0.05);
    --pearl-season-default-text: #94a3b8;
}

.sleek-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--pearl-border);
    background: var(--pearl-surface);
    backdrop-filter: blur(10px);
}

.sleek-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -12px var(--pearl-shadow);
    border-color: var(--pearl-border-hover);
}

.text-slate {
    color: var(--pearl-text-muted) !important;
}

/* --- SYSTEM-WIDE SOFT GLASS BADGES --- */
.glass-pill-sm {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: fit-content;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-pill-sm:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
}

/* HSL-Based Expert Color System */
.glass-primary { background: var(--pearl-glass-primary-bg); color: var(--pearl-glass-primary-text); border: 1px solid var(--pearl-glass-primary-border); }
.glass-success { background: var(--pearl-glass-success-bg); color: var(--pearl-glass-success-text); border: 1px solid var(--pearl-glass-success-border); }
.glass-warning { background: var(--pearl-glass-warning-bg); color: var(--pearl-glass-warning-text); border: 1px solid var(--pearl-glass-warning-border); }
.glass-error   { background: var(--pearl-glass-error-bg); color: var(--pearl-glass-error-text); border: 1px solid var(--pearl-glass-error-border); }
.glass-info    { background: var(--pearl-glass-info-bg); color: var(--pearl-glass-info-text); border: 1px solid var(--pearl-glass-info-border); }
.glass-neutral { background: var(--pearl-glass-neutral-bg); color: var(--pearl-glass-neutral-text); border: 1px solid var(--pearl-glass-neutral-border); }

/* --- EXPERT ELEVATION LAYERS --- */
.floating-pearl {
    box-shadow: 0 20px 40px -12px var(--pearl-shadow), 0 0 12px -3px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--pearl-floating-border);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: var(--pearl-surface-opaque);
}

.floating-pearl:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px var(--pearl-shadow-hover), 0 8px 15px -5px rgba(0, 0, 0, 0.06);
}

.navy-glow {
    box-shadow: 0 20px 40px -12px var(--pearl-shadow), 0 0 12px -3px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--pearl-navy-glow-border);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.navy-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -15px var(--pearl-shadow-hover), 0 8px 15px -5px rgba(0, 0, 0, 0.06);
    border-color: var(--pearl-navy-glow-border-hover);
}

/* --- SEASON CHIP TOKENS --- */
.season-fall       { background-color: var(--pearl-season-fall-bg) !important; color: var(--pearl-season-fall-text) !important; }
.season-winter     { background-color: var(--pearl-season-winter-bg) !important; color: var(--pearl-season-winter-text) !important; }
.season-spring     { background-color: var(--pearl-season-spring-bg) !important; color: var(--pearl-season-spring-text) !important; }
.season-year-round { background-color: var(--pearl-season-purple-bg) !important; color: var(--pearl-season-purple-text) !important; }
.season-default    { background-color: var(--pearl-season-default-bg) !important; color: var(--pearl-season-default-text) !important; }

/* Page Hero dark mode override */
.theme-dark .hero-bg-layer {
    background: linear-gradient(135deg, #18181b 0%, #0b0f17 100%) !important;
}