/* ============================================
   PITCHBASE B2B — Design System Tokens
   ============================================ */

:root {
    /* Primary */
    --b2b-primary: #4f46e5;
    --b2b-primary-hover: #4338ca;
    --b2b-primary-light: #eef2ff;
    --b2b-primary-100: #e0e7ff;
    --b2b-primary-200: #c7d2fe;
    --b2b-primary-500: #6366f1;

    /* Surfaces */
    --b2b-surface: #ffffff;
    --b2b-surface-alt: #f8fafc;
    --b2b-bg: #f8fafc;

    /* Borders */
    --b2b-border: #e2e8f0;
    --b2b-border-light: #f1f5f9;

    /* Text */
    --b2b-text: #0f172a;
    --b2b-text-secondary: #475569;
    --b2b-text-muted: #94a3b8;
    --b2b-text-light: #cbd5e1;

    /* Semantic */
    --b2b-success: #059669;
    --b2b-success-light: #ecfdf5;
    --b2b-warning: #d97706;
    --b2b-warning-light: #fffbeb;
    --b2b-danger: #dc2626;
    --b2b-danger-light: #fef2f2;

    /* Shadows */
    --b2b-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --b2b-shadow: 0 2px 8px rgba(0,0,0,0.04);
    --b2b-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --b2b-shadow-lg: 0 8px 24px rgba(0,0,0,0.1);

    /* Radius */
    --b2b-radius-sm: 8px;
    --b2b-radius: 12px;
    --b2b-radius-lg: 16px;

    /* Transition */
    --b2b-transition: 150ms ease;
}

/* ============================================
   Utility classes for the B2B design system
   ============================================ */

.b2b-card {
    background: var(--b2b-surface);
    border: 1px solid var(--b2b-border);
    border-radius: var(--b2b-radius);
    box-shadow: var(--b2b-shadow);
    transition: box-shadow var(--b2b-transition);
}

.b2b-card:hover {
    box-shadow: var(--b2b-shadow-md);
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--b2b-radius-sm);
}

.skeleton-card {
    background: var(--b2b-surface);
    border: 1px solid var(--b2b-border-light);
    border-radius: var(--b2b-radius);
}

.skeleton-text {
    height: 12px;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}