body {
    margin: 0;
    padding: 0;
}

/* css variables for app */

:root {
    /* colors */

    --ndh-primary-light: #316497;
    --ndh-primary: #003366;
    --ndh-primary-dark: #0c2135;

    --ndh-secondary-light: #730d44;
    --ndh-secondary: #660037;
    --ndh-secondary-dark: #49082b;

    --ndh-tertiary: #293133;

    --ndh-white: #fff;
    --ndh-gray-1: #f5f5f5;
    --ndh-gray-2: #e0e0e0;
    --ndh-gray-3: #c0c0c0;
    --ndh-gray-4: #a0a0a0;
    --ndh-gray-5: #808080;
    --ndh-gray-6: #606060;
    --ndh-gray-7: #404040;
    --ndh-gray-8: #202020;
    --ndh-gray-9: #101010;
    --ndh-black: #000;

    --ndh-info: #90D5FF;
    --ndh-success: #4CAF50;
    --ndh-warning-light: #ffe7c4;
    --ndh-warning: #FF9800;
    --ndh-warning-dark: #d88100;
    --ndh-danger: #F44336;

    --ndh-disabled: var(--ndh-gray-5);
    --ndh-background-color: var(--ndh-gray-2);
    --ndh-text-color: var(--ndh-tertiary);

    /* dark mode colors */

    /* fonts */
    @font-face {
        font-family: 'Open Sans';
        src: url('@/assets/font/openSans/OpenSans-VariableFont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    --ndh-font-family: 'Open Sans', 'Arial', sans-serif;
    --ndh-font-size: 16px;
    --ndh-font-weight: 400;
    --ndh-font-weight-bold: 600;
    --ndh-font-weight-extra-bold: 800;

    /* icons */
    --ndh-icon-font-family: 'Material Icons';
    --ndh-icon-size-small: 16px;
    --ndh-icon-size-medium: 24px;
    --ndh-icon-size-large: 32px;
    --ndh-icon-size-xlarge: 48px;
    --ndh-icon-font-weight: 400;
    --ndh-icon-font-weight-bold: 700;


    /* spacing */
    --ndh-spacing-xs: 4px;
    --ndh-spacing-sm: 8px;
    --ndh-spacing-md: 16px;
    --ndh-spacing-lg: 24px;
    --ndh-spacing-xl: 32px;
    --ndh-spacing-xxl: 48px;

    /* breakpoints  todo: other solution */
    --ndh-breakpoint-xs: ${breakpointXs};
    --ndh-breakpoint-sm: ${breakpointSm};
    --ndh-breakpoint-md: ${breakpointMd};
    --ndh-breakpoint-lg: ${breakpointLg};
    --ndh-breakpoint-xl: ${breakpointXl};
    --ndh-breakpoint-xxl: ${breakpointXxl};

    /* z-index */
    --ndh-z-index-header: 1000;
    --ndh-z-index-footer: 900;
    --ndh-z-index-modal: 1100;
    --ndh-z-index-tooltip: 1200;
    --ndh-z-index-dropdown: 1300;
    --ndh-z-index-toast: 1400;
    --ndh-z-index-sidebar: 1500;
    --ndh-z-index-overlay: 1600;
    --ndh-z-index-popover: 1700;
    --ndh-z-index-spinner: 1800;
    --ndh-z-index-backdrop: 1900;
    --ndh-z-index-toast-container: 2000;
    --ndh-z-index-tooltip-container: 2100;
    --ndh-z-index-modal-container: 2200;
    --ndh-z-index-drawer: 2300;
    --ndh-z-index-dialog: 2400;
    --ndh-z-index-context-menu: 2500;
    --ndh-z-index-banner: 2600;
    --ndh-z-index-alert: 2700;
    --ndh-z-index-card: 2800;

    /* shadows */
    --ndh-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
    --ndh-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ndh-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --ndh-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --ndh-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1);

    /* transitions */
    --ndh-transition-fast: 0.2s ease-in-out;
    --ndh-transition-medium: 0.3s ease-in-out;
    --ndh-transition-slow: 0.4s ease-in-out;
    --ndh-transition-very-slow: 0.5s ease-in-out;

    /* animations */
    --ndh-animation-fade-in: fade-in 0.3s ease-in-out;
    --ndh-animation-fade-out: fade-out 0.3s ease-in-out;
    --ndh-animation-slide-in: slide-in 0.3s ease-in-out;
    --ndh-animation-slide-out: slide-out 0.3s ease-in-out;

    /* other variables */
    --ndh-border-radius: 4px;
    --ndh-border-width: 1px;
    --ndh-border-color: rgba(0, 0, 0, 0.1);
}