/*
=========================================================
BOSS Design System
=========================================================
*/

:root {

    /*
    =====================================================
    Brand
    =====================================================
    */

    --boss-blue: #0b3d7a;
    --boss-primary: var(--boss-blue);
    --boss-blue-hover: var(--boss-blue);
    --boss-blue-dark: var(--boss-blue);
    --boss-blue-light: var(--boss-blue);

    --boss-green: #16A34A;
    --boss-red: #D92D20;
    --boss-orange: #F79009;
    --boss-yellow: #F9A825;
    --boss-information: var(--boss-blue);


    /*
    =====================================================
    Backgrounds
    =====================================================
    */

    --background-page: #F5F7FA;
    --background-card: #FFFFFF;
    --background-panel: #FFFFFF;
    --background-hover: #F3F7FC;
    --background-selected: #FFFFFF;


    /*
    =====================================================
    Text
    =====================================================
    */

    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-white: #FFFFFF;


    /*
    =====================================================
    Borders
    =====================================================
    */

    --border-color: #D8DEE8;
    --divider-color: #E5E7EB;


    /*
    =====================================================
    Status
    =====================================================
    */

    --status-emergency: #D92D20;
    --status-urgent: #F79009;
    --status-routine: var(--boss-blue);
    --status-success: #16A34A;
    --status-cancelled: #757575;


    /*
    =====================================================
    Shadows
    =====================================================
    */

    --shadow-small: 0 1px 4px rgba(15, 23, 42, .08);
    --shadow-medium: 0 4px 14px rgba(15, 23, 42, .10);
    --shadow-large: 0 12px 28px rgba(15, 23, 42, .14);


    /*
    =====================================================
    Radius
    =====================================================
    */

    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 12px;
    --radius-round: 999px;


    /*
    =====================================================
    Spacing
    =====================================================
    */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;


    /*
    =====================================================
    Layout
    =====================================================
    */

    --header-height: 96px;
    --navigation-width: 250px;
    --queue-width: 980px;
    --workflow-width: 280px;
    --page-padding: 24px;


    /*
    =====================================================
    Animation
    =====================================================
    */

    --transition-fast: .15s;
    --transition-normal: .25s;
    --transition-slow: .40s;

}

/* Shared editable-control focus: color changes without changing border width. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus-visible {
    border-color: var(--boss-blue) !important;
    outline: 0;
    box-shadow: none !important;
}