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

:root {
    /* Typography - Poppins (FastLane 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 - FastLane 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 - FastLane palette */
    --fl-text-heading: #1a1f2c;
    --fl-text-default: #454545;
    --fl-text-muted: #8a94a6;
    --fl-text-placeholder: rgba(69, 69, 69, 0.45);

    /* AB#2218 — gris para etiquetas sobre fondo `subtle`. Medido: --fl-muted (#7E8299) sobre
       #f8fafc da 3.62:1, por debajo del 4.5:1 que pide AA para 12px en mayúsculas. Este da 5.36:1
       sin oscurecer la etiqueta hasta competir con el texto del propio control. */
    --fl-text-muted-on-subtle: #5c6880;
    --fl-text-strong: #1a1f2c;
    
    /* Link colors */
    --fl-link: #042069;
    
    /* Focus ring */
    --fl-focus-ring: rgba(4, 32, 105, 0.25);
    
    /* Brand colors */
    --fl-brand-primary: #042069;
    --fl-brand-primary-hover: #0a2f8f;
    /* AB#2253 — degradado de la cabecera de pantalla. Existia escrito a mano en tres ficheros con
       dos parejas de azules distintas; una sola definicion es lo que impide que vuelvan a divergir.
       Arranca en el azul de marca; el extremo claro es el que ya habia migrado fl-ordermanagement. */
    --fl-brand-gradient: linear-gradient(135deg, #042069 0%, #1a5bb5 100%);
    --fl-brand-gradient-border: rgba(4, 32, 105, 0.55);
    --fl-brand-light: rgba(4, 32, 105, 0.08);
    --fl-brand-active: rgba(4, 32, 105, 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;

    /* AB#2246 — texto sobre los fondos de estado. Mismo caso que AB#2218 con
       --fl-text-muted-on-subtle: el color de estado sobre su propio fondo claro no llega a AA.
       Medido: success 2.31:1, warning 1.93:1, danger 3.08:1 — el peor deja el texto practicamente
       ilegible. Estos tres pasan AAA (7.12, 8.15 y 7.28) sin salirse de la familia de color. */
    --fl-text-on-success: #0b5e3f;
    --fl-text-on-warning: #78350f;
    --fl-text-on-danger: #8f1d1d;
    
    /* 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;

    /* AB#2272 — elevaciones del dock del asistente (DSN-2272). Navy de marca con alfa. */
    --fl-shadow-dock: 0 12px 40px rgba(3, 22, 73, 0.22);
    --fl-shadow-pill: 0 8px 24px rgba(3, 22, 73, 0.3);
    
    /* 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;
}

/* FastLane 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); }