/* =========================================================
   UFS DESIGN TOKENS
   Central, context-neutral design primitives for UFS.
   ========================================================= */
:root {
    /* Layering */
    --ufs-z-base: 1;
    --ufs-z-sticky: 100;
    --ufs-z-header: 1001;
    --ufs-z-backdrop: 2999;
    --ufs-z-overlay: 3000;
    --ufs-z-toast: 4000;

    /* Facility brand */
    --ufs-facility-darker: #084CB5;
    --ufs-facility-primary: #0A63E0;
    --ufs-facility-light: #4C8CF0;
    --ufs-facility-lighter: #DDEBFF;
    --ufs-facility-muted: #B3CCF2;

    /* Personal brand */
    --ufs-personal-darker: #15734B;
    --ufs-personal-primary: #1B9460;
    --ufs-personal-light: #47B686;
    --ufs-personal-lighter: #E6FFF0;
    --ufs-personal-muted: #B3D7C5;

    /* Supporting brand neutrals */
    --ufs-navy: #0B2D4B;
    --ufs-background: #F7F9FB;
    --ufs-surface: #FFFFFF;
    --ufs-surface-subtle: #FBFCFE;
    --ufs-info-background: #E1EEFF;

    /* Danger */
    --ufs-danger-darker: #A3141F;
    --ufs-danger-primary: #C71F2A;
    --ufs-danger-light: #E85B65;
    --ufs-danger-lighter: #FFE5E7;

    /* Warning / update */
    --ufs-warning-darker: #C27A00;
    --ufs-warning-primary: #E09E00;
    --ufs-warning-light: #F7C14D;
    --ufs-warning-lighter: #FFF6E0;

    /* Neutral labels and borders */
    --ufs-gray-950: #111827;
    --ufs-gray-900: #1F2937;
    --ufs-gray-800: #374151;
    --ufs-gray-700: #545B62;
    --ufs-gray-600: #6C757D;
    --ufs-gray-500: #7B8490;
    --ufs-gray-400: #9CA3A9;
    --ufs-gray-300: #CBD2DA;
    --ufs-gray-200: #E4E7EA;
    --ufs-gray-100: #EEF1F4;
    --ufs-gray-50: #F7F9FB;

    /* Typography */
    --ufs-font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ufs-font-size-xs: .75rem;
    --ufs-font-size-sm: .875rem;
    --ufs-font-size-md: 1rem;
    --ufs-font-size-lg: 1.125rem;
    --ufs-font-size-xl: 1.25rem;
    --ufs-font-size-2xl: 1.5rem;
    --ufs-font-size-3xl: 1.875rem;
    --ufs-font-size-4xl: 2.25rem;
    --ufs-line-height-tight: 1.2;
    --ufs-line-height-normal: 1.5;
    --ufs-line-height-relaxed: 1.7;
    --ufs-font-weight-regular: 400;
    --ufs-font-weight-medium: 500;
    --ufs-font-weight-semibold: 600;
    --ufs-font-weight-bold: 700;

    /* Spacing */
    --ufs-space-0: 0;
    --ufs-space-1: .25rem;
    --ufs-space-2: .5rem;
    --ufs-space-3: .75rem;
    --ufs-space-4: 1rem;
    --ufs-space-5: 1.25rem;
    --ufs-space-6: 1.5rem;
    --ufs-space-8: 2rem;
    --ufs-space-10: 2.5rem;
    --ufs-space-12: 3rem;
    --ufs-space-16: 4rem;

    /* Shape */
    --ufs-radius-xs: 6px;
    --ufs-radius-sm: 8px;
    --ufs-radius-md: 10px;
    --ufs-radius: 14px;
    --ufs-radius-lg: 20px;
    --ufs-radius-xl: 28px;
    --ufs-radius-pill: 999px;

    /* Borders */
    --ufs-border-width: 1px;
    --ufs-border-color: #E4E7EA;
    --ufs-border-color-strong: #CBD2DA;

    /* Shadows */
    --ufs-shadow-xs: 0 1px 2px rgba(11, 45, 75, .05);
    --ufs-shadow-sm: 0 4px 12px rgba(11, 45, 75, .06);
    --ufs-shadow-md: 0 10px 26px rgba(11, 45, 75, .08);
    --ufs-shadow-lg: 0 18px 42px rgba(11, 45, 75, .12);
    --ufs-shadow-focus: 0 0 0 .25rem rgba(10, 99, 224, .18);

    /* Motion */
    --ufs-duration-fast: 120ms;
    --ufs-duration-normal: 180ms;
    --ufs-duration-slow: 260ms;
    --ufs-ease-standard: cubic-bezier(.2, 0, 0, 1);

    /* Layout */
    --ufs-content-narrow: 820px;
    --ufs-content-default: 1180px;
    --ufs-content-wide: 1440px;
    --ufs-header-height: 64px;
    --ufs-sidebar-width: 280px;
    --ufs-sidebar-collapsed-width: 76px;

    /* Default context: Facility for backwards compatibility */
    --ufs-context-darker: var(--ufs-facility-darker);
    --ufs-context-primary: var(--ufs-facility-primary);
    --ufs-context-light: var(--ufs-facility-light);
    --ufs-context-lighter: var(--ufs-facility-lighter);
    --ufs-context-muted: var(--ufs-facility-muted);
    --ufs-context-on-primary: #FFFFFF;
}