@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
    /* Typography - Poppins (Figma standard) */
    --fl-font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fl-w-regular: 400;
    --fl-w-medium: 500;
    --fl-w-semibold: 600;
    --fl-w-bold: 700;

    /* Font sizes - Figma scale */
    --fl-text-xs: 12px;
    --fl-lh-xs: 18px;
    --fl-text-sm: 14px;
    --fl-lh-sm: 20px;
    --fl-text-base: 16px;
    --fl-lh-base: 24px;
    --fl-text-lg: 18px;
    --fl-lh-lg: 28px;
    --fl-text-xl: 20px;
    --fl-lh-xl: 28px;
    --fl-text-2xl: 24px;
    --fl-lh-2xl: 32px;
    --fl-text-3xl: 32px;
    --fl-lh-3xl: 40px;

    /* Colors - Figma palette */
    --fl-text-heading: #1a1f2c;
    --fl-text-default: #454545;
    --fl-text-muted: #8a94a6;
    --fl-text-placeholder: rgba(69, 69, 69, 0.45);
    --fl-text-strong: #1a1f2c;
    
    /* Link colors */
    --fl-link: #0f48a0;
    
    /* Focus ring */
    --fl-focus-ring: rgba(15, 72, 160, 0.25);
    
    /* Brand colors */
    --fl-brand-primary: #0f48a0;
    --fl-brand-primary-hover: #0b3a7d;
    --fl-brand-light: rgba(15, 72, 160, 0.08);
    --fl-brand-active: rgba(15, 72, 160, 0.1);
    
    /* Status colors */
    --fl-success: #10b981;
    --fl-success-light: #dcfce7;
    --fl-warning: #f59e0b;
    --fl-warning-light: #fef3c7;
    --fl-danger: #ef4444;
    --fl-danger-light: #fee2e2;
    --fl-info: #3b82f6;
    --fl-info-light: #dbeafe;
    
    /* Surfaces */
    --fl-surface: #ffffff;
    --fl-surface-subtle: #f7f9fc;
    --fl-surface-hover: #f1f5f7;
    --fl-border: #f1f5f7;
    --fl-border-strong: #dfe4ee;
    
    /* Spacing */
    --fl-space-1: 4px;
    --fl-space-2: 8px;
    --fl-space-3: 12px;
    --fl-space-4: 16px;
    --fl-space-5: 20px;
    --fl-space-6: 24px;
    --fl-space-8: 32px;
    --fl-space-10: 40px;
    
    /* Radii */
    --fl-radius-sm: 6px;
    --fl-radius-md: 10px;
    --fl-radius-lg: 14px;
    --fl-radius-xl: 20px;
    --fl-radius-full: 999px;
    
    /* Layout */
    --fl-sidebar-width: 280px;
    --fl-sidebar-collapsed: 86px;
    --fl-topbar-height: 79px;
    --fl-shell-max-width: 1160px;
    --fl-shell-gutter: 32px;
    
    /* Controls */
    --fl-control-h: 48px;
    --fl-control-h-sm: 40px;
    --fl-control-h-compact: 32px;
}

html, body {
    font-family: var(--fl-font-sans) !important;
    color: var(--fl-text-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

input, button, select, textarea {
    font-family: inherit;
}

/* Figma parity utility classes */
.fl-text-heading { color: var(--fl-text-heading); }
.fl-text-muted { color: var(--fl-text-muted); }
.fl-brand-primary { color: var(--fl-brand-primary); }
.fl-bg-brand-light { background-color: var(--fl-brand-light); }
.fl-bg-brand-active { background-color: var(--fl-brand-active); }
.fl-radius-md { border-radius: var(--fl-radius-md); }
.fl-radius-lg { border-radius: var(--fl-radius-lg); }