/**
* font-face Hexagon Akkurat declarations
* it supports woff2 and woff formats
* it supports normal black bold styles
* it locates in /fonts/ folder
* it named as Hexagon Akkurat Web <style>.<format> for example Hexagon Akkurat Web.woff2
*/
@font-face {
  font-family: 'Hexagon Akkurat';
  src:
    url('./fonts/Hexagon Akkurat Web.woff2') format('woff2'),
    url('./fonts/Hexagon Akkurat Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Hexagon Akkurat';
  src:
    url('./fonts/Hexagon Akkurat Web Black.woff2') format('woff2'),
    url('./fonts/Hexagon Akkurat Web Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Hexagon Akkurat';
  src:
    url('./fonts/Hexagon Akkurat Web Bold.woff2') format('woff2'),
    url('./fonts/Hexagon Akkurat Web Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/**
 * Nova Design System - Theme CSS Variables
 * 
 * This file contains all the CSS custom properties (variables) used throughout the Nova design system.
 * It follows a mobile-first approach with progressive enhancement through media queries.
 * 
 * Breakpoints:
 * - Mobile: 0-600px (default)
 * - Tablet: 600px-1200px
 * - Laptop: 1200px-1600px
 * - Desktop: 1600px
 * 
 * Variable Categories:
 * - Radius tokens: Border radius values for different components
 * - Spacing tokens: Padding and margins for layout spacing
 * - Height tokens: Standard height values for components
 * - Icon size tokens: Standardized icon dimensions
 * - Outline tokens: Border width values
 * - Component tokens: Specific dimensions for components like cards, navigation, etc.
 * 
 * Usage:
 * var(--token-name) // Example: var(--radius-2xs)
 * 
 * Note: Values defined in :root will be overridden by media queries based on viewport width.
 * Each breakpoint only defines the values that change from the previous breakpoint.
 */

/** COLOR TOKENS **/
:root {
  /* Brand Blue */
  --color-brandBlue-0: #000000;
  --color-brandBlue-10: #003541;
  --color-brandBlue-20: #004454;
  --color-brandBlue-30: #005b70;
  --color-brandBlue-40: #00718c;
  --color-brandBlue-50: #007995;
  --color-brandBlue-60: #0089a7;
  --color-brandBlue-70: #0097ba;
  --color-brandBlue-80: #b0dfea;
  --color-brandBlue-90: #d9eff5;
  --color-brandBlue-95: #e6f5f8;
  --color-brandBlue-99: #ffffff;
  --color-brandBlue-100: #ffffff;

  /* Brand Green */
  --color-brandGreen-0: #000000;
  --color-brandGreen-10: #00492c;
  --color-brandGreen-20: #25663c;
  --color-brandGreen-30: #4a834b;
  --color-brandGreen-40: #6e9e5c;
  --color-brandGreen-50: #93bc6a;
  --color-brandGreen-60: #a6cc70;
  --color-brandGreen-70: #bad97a;
  --color-brandGreen-80: #cae49f;
  --color-brandGreen-90: #daf0c3;
  --color-brandGreen-95: #f5f9eb;
  --color-brandGreen-99: #fffffc;
  --color-brandGreen-100: #ffffff;

  /* Grey / Neutral */
  --color-neutral-0: #000000;
  --color-neutral-10: #121623;
  --color-neutral-20: #2b2f3f;
  --color-neutral-30: #474f5f;
  --color-neutral-40: #646e78;
  --color-neutral-50: #858c99;
  --color-neutral-60: #b4bac4;
  --color-neutral-70: #cdd3db;
  --color-neutral-80: #e6eaf0;
  --color-neutral-90: #f5f7fa;
  --color-neutral-95: #ffffff;
  --color-neutral-99: #ffffff;
  --color-neutral-100: #ffffff;

  /* Neutral Variant */
  --color-neutralVariant-0: #ffffff;
  --color-neutralVariant-10: #161a24;
  --color-neutralVariant-20: #333640;
  --color-neutralVariant-30: #474f5f;
  --color-neutralVariant-40: #3b3f4e;
  --color-neutralVariant-50: #ffffff;
  --color-neutralVariant-60: #ffffff;
  --color-neutralVariant-70: #ffffff;
  --color-neutralVariant-80: #ffffff;
  --color-neutralVariant-90: #edf0f3;
  --color-neutralVariant-95: #f8fafd;
  --color-neutralVariant-99: #ffffff;
  --color-neutralVariant-100: #ffffff;

  /* Red (Error) */
  --color-red-0: #000000;
  --color-red-10: #5b0405;
  --color-red-20: #8d0f0f;
  --color-red-30: #bc1c1c;
  --color-red-40: #eb1414;
  --color-red-50: #fd453f;
  --color-red-60: #fd877e;
  --color-red-70: #ffa79f;
  --color-red-80: #ffc5be;
  --color-red-90: #ffd9d3;
  --color-red-95: #fceae7;
  --color-red-99: #ffffff;
  --color-red-100: #ffffff;

  /* Orange (Warning) */
  --color-orange-0: #000000;
  --color-orange-10: #432504;
  --color-orange-20: #694013;
  --color-orange-30: #8e5515;
  --color-orange-40: #b26514;
  --color-orange-50: #cf7911;
  --color-orange-60: #f19724;
  --color-orange-70: #fbaf35;
  --color-orange-80: #fccc79;
  --color-orange-90: #fedcaa;
  --color-orange-95: #feecd1;
  --color-orange-99: #ffffff;
  --color-orange-100: #ffffff;

  /* Green (Success) */
  --color-green-0: #000000;
  --color-green-10: #143509;
  --color-green-20: #255521;
  --color-green-30: #3a6e2b;
  --color-green-40: #488635;
  --color-green-50: #529f3c;
  --color-green-60: #6dbd55;
  --color-green-70: #7dd166;
  --color-green-80: #a2e592;
  --color-green-90: #c2ecb6;
  --color-green-95: #e2fad5;
  --color-green-99: #ffffff;
  --color-green-100: #ffffff;

  /* Blue (Info) */
  --color-blue-0: #000000;
  --color-blue-10: #053044;
  --color-blue-20: #104f6d;
  --color-blue-30: #0e6991;
  --color-blue-40: #0481b3;
  --color-blue-50: #1696ce;
  --color-blue-60: #33b4f2;
  --color-blue-70: #65c8fd;
  --color-blue-80: #9edbff;
  --color-blue-90: #c1e6fc;
  --color-blue-95: #e1f3ff;
  --color-blue-99: #ffffff;
  --color-blue-100: #ffffff;

  /* Purple */
  --color-purple-10: #a144ea;
  --color-purple-20: #f569e2;
}

/* Mobile breakpoint */
@media (min-width: 0px) {
  :root {
    --padding-top-bottom-none: 0px;
    --padding-top-bottom-2xs: 4px;
    --padding-top-bottom-xs: 4px;
    --padding-top-bottom-sm: 8px;
    --padding-top-bottom-md: 12px;
    --padding-top-bottom-lg: 16px;
    --padding-top-bottom-xl: 24px;
    --padding-top-bottom-2xl: 32px;
    --padding-top-bottom-3xl: 40px;
    --padding-top-bottom-4xl: 48px;
    --padding-top-bottom-5xl: 56px;
    --padding-left-right-none: 0px;
    --padding-left-right-2xs: 4px;
    --padding-left-right-xs: 4px;
    --padding-left-right-sm: 8px;
    --padding-left-right-md: 12px;
    --padding-left-right-lg: 16px;
    --padding-left-right-xl: 24px;
    --padding-left-right-2xl: 32px;
    --padding-left-right-3xl: 40px;
    --padding-left-right-4xl: 48px;
    --padding-left-right-5xl: 56px;
    --space-between-horizontal-none: 0px;
    --space-between-horizontal-2xs: 4px;
    --space-between-horizontal-xs: 4px;
    --space-between-horizontal-sm: 8px;
    --space-between-horizontal-md: 12px;
    --space-between-horizontal-lg: 16px;
    --space-between-horizontal-xl: 24px;
    --space-between-horizontal-2xl: 32px;
    --space-between-horizontal-3xl: 40px;
    --space-between-horizontal-4xl: 48px;
    --space-between-horizontal-5xl: 56px;
    --space-between-vertical-none: 0px;
    --space-between-vertical-2xs: 4px;
    --space-between-vertical-xs: 4px;
    --space-between-vertical-sm: 8px;
    --space-between-vertical-md: 12px;
    --space-between-vertical-lg: 16px;
    --space-between-vertical-xl: 24px;
    --space-between-vertical-2xl: 32px;
    --space-between-vertical-3xl: 40px;
    --space-between-vertical-4xl: 48px;
    --space-between-vertical-5xl: 56px;
    --typescale-weight-regular: regular;
    --booleans-side-sheet-radius: 16px;
    --booleans-top-nav-bar-width: 375px;
    --booleans-app-bar-width: 375px;
    --booleans-nav-drawer-menu-item-level2: 32px;
    --booleans-nav-drawer-padding: 24px;
    --booleans-login-radius: 0px;
    --booleans-login-width: 375px;
    --booleans-login-outline: 0px;
    --booleans-sys-error-width: 343px;
    --booleans-sys-error-image-width: 0px;
    --booleans-user-profile-width: 375px;
    --booleans-user-profile-text-field-width: 342px;
    --booleans-user-profile-radius: 0px;
    --booleans-user-profile-outline: 0px;
    --booleans-user-profile-avatar-group-width: 342px;
    --booleans-avatarmenu-radius: 0px;
    --booleans-avatarmenu-width: 375px;
    --booleans-avatarmenu-outline: 0px;
    --booleans-avatarmenu-type: Vertical;
    --margin-top-nav: 16px;
    --margin-lg: 16px;
    --margin-xl: 24px;
    --margin-2xl: 32px;
    --margin-3xl: 32px;
    --margin-4xl: 48px;
    --margin-5xl: 52px;
    --margin-6xl: 64px;
    --margin-7xl: 72px;
    --margin-8xl: 80px;
    --margin-9xl: 88px;
    --radius-none: 0px;
    --radius-2xs: 4px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-fully-rounded: 999px;
    --height-md: 16px;
    --height-lg: 24px;
    --height-xl: 32px;
    --height-2xl: 40px;
    --height-icons-md: 16px;
    --height-icons-lg: 16px;
    --height-icons-xl: 20px;
    --height-3xl: 48px;
    --height-4xl: 56px;
    --height-5xl: 64px;
    --height-card-vertical: 84px;
    --width-card-stacked: 288px;
    --width-card-horizontal: 288px;
    --width-side-nav: 0px;
    --width-icon: 20px;
    --width-screen: 375px;
    --outline-none: 0px;
    --outline-slight: 0.5px;
    --outline-regular: 1px;
    --outline-considerate: 1.5px;
    --outline-exaggerated: 2px;
  }
}

/* Tablet breakpoint */
@media (min-width: 600px) {
  :root {
    --padding-top-bottom-none: 0px;
    --padding-top-bottom-2xs: 4px;
    --padding-top-bottom-xs: 4px;
    --padding-top-bottom-sm: 8px;
    --padding-top-bottom-md: 12px;
    --padding-top-bottom-lg: 16px;
    --padding-top-bottom-xl: 24px;
    --padding-top-bottom-2xl: 32px;
    --padding-top-bottom-3xl: 40px;
    --padding-top-bottom-4xl: 48px;
    --padding-top-bottom-5xl: 56px;
    --padding-left-right-none: 0px;
    --padding-left-right-2xs: 4px;
    --padding-left-right-xs: 4px;
    --padding-left-right-sm: 8px;
    --padding-left-right-md: 12px;
    --padding-left-right-lg: 16px;
    --padding-left-right-xl: 24px;
    --padding-left-right-2xl: 32px;
    --padding-left-right-3xl: 40px;
    --padding-left-right-4xl: 48px;
    --padding-left-right-5xl: 56px;
    --space-between-horizontal-none: 0px;
    --space-between-horizontal-2xs: 4px;
    --space-between-horizontal-xs: 4px;
    --space-between-horizontal-sm: 8px;
    --space-between-horizontal-md: 12px;
    --space-between-horizontal-lg: 16px;
    --space-between-horizontal-xl: 24px;
    --space-between-horizontal-2xl: 32px;
    --space-between-horizontal-3xl: 40px;
    --space-between-horizontal-4xl: 48px;
    --space-between-horizontal-5xl: 56px;
    --space-between-vertical-none: 0px;
    --space-between-vertical-2xs: 4px;
    --space-between-vertical-xs: 4px;
    --space-between-vertical-sm: 8px;
    --space-between-vertical-md: 12px;
    --space-between-vertical-lg: 16px;
    --space-between-vertical-xl: 24px;
    --space-between-vertical-2xl: 32px;
    --space-between-vertical-3xl: 40px;
    --space-between-vertical-4xl: 48px;
    --space-between-vertical-5xl: 56px;
    --typescale-weight-regular: regular;
    --booleans-side-sheet-radius: 4px;
    --booleans-top-nav-bar-width: 768px;
    --booleans-app-bar-width: 768px;
    --booleans-nav-drawer-menu-item-level2: 32px;
    --booleans-nav-drawer-padding: 24px;
    --booleans-login-radius: 16px;
    --booleans-login-width: 392px;
    --booleans-login-outline: 1px;
    --booleans-sys-error-width: 474px;
    --booleans-sys-error-image-width: 0px;
    --booleans-user-profile-width: 720px;
    --booleans-user-profile-text-field-width: 394px;
    --booleans-user-profile-radius: 16px;
    --booleans-user-profile-outline: 1px;
    --booleans-user-profile-avatar-group-width: 168px;
    --booleans-avatarmenu-radius: 12px;
    --booleans-avatarmenu-width: 348px;
    --booleans-avatarmenu-outline: 1px;
    --booleans-avatarmenu-type: Horizontal;
    --margin-top-nav: 24px;
    --margin-lg: 16px;
    --margin-xl: 24px;
    --margin-2xl: 32px;
    --margin-3xl: 32px;
    --margin-4xl: 48px;
    --margin-5xl: 52px;
    --margin-6xl: 64px;
    --margin-7xl: 72px;
    --margin-8xl: 80px;
    --margin-9xl: 88px;
    --radius-none: 0px;
    --radius-2xs: 4px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-fully-rounded: 999px;
    --height-md: 16px;
    --height-lg: 24px;
    --height-xl: 32px;
    --height-2xl: 40px;
    --height-icons-md: 16px;
    --height-icons-lg: 16px;
    --height-icons-xl: 20px;
    --height-3xl: 48px;
    --height-4xl: 56px;
    --height-5xl: 64px;
    --height-card-vertical: 84px;
    --width-card-stacked: 320px;
    --width-card-horizontal: 744px;
    --width-side-nav: 72px;
    --width-icon: 20px;
    --width-screen: 768px;
    --outline-none: 0px;
    --outline-slight: 0.5px;
    --outline-regular: 1px;
    --outline-considerate: 1.5px;
    --outline-exaggerated: 2px;
  }
}

/* Laptop breakpoint */
@media (min-width: 1200px) {
  :root {
    --padding-top-bottom-none: 0px;
    --padding-top-bottom-2xs: 4px;
    --padding-top-bottom-xs: 8px;
    --padding-top-bottom-sm: 12px;
    --padding-top-bottom-md: 16px;
    --padding-top-bottom-lg: 24px;
    --padding-top-bottom-xl: 32px;
    --padding-top-bottom-2xl: 40px;
    --padding-top-bottom-3xl: 48px;
    --padding-top-bottom-4xl: 56px;
    --padding-top-bottom-5xl: 64px;
    --padding-left-right-none: 0px;
    --padding-left-right-2xs: 4px;
    --padding-left-right-xs: 8px;
    --padding-left-right-sm: 12px;
    --padding-left-right-md: 16px;
    --padding-left-right-lg: 24px;
    --padding-left-right-xl: 32px;
    --padding-left-right-2xl: 40px;
    --padding-left-right-3xl: 48px;
    --padding-left-right-4xl: 56px;
    --padding-left-right-5xl: 64px;
    --space-between-horizontal-none: 0px;
    --space-between-horizontal-2xs: 4px;
    --space-between-horizontal-xs: 8px;
    --space-between-horizontal-sm: 12px;
    --space-between-horizontal-md: 16px;
    --space-between-horizontal-lg: 24px;
    --space-between-horizontal-xl: 32px;
    --space-between-horizontal-2xl: 40px;
    --space-between-horizontal-3xl: 48px;
    --space-between-horizontal-4xl: 56px;
    --space-between-horizontal-5xl: 64px;
    --space-between-vertical-none: 0px;
    --space-between-vertical-2xs: 4px;
    --space-between-vertical-xs: 8px;
    --space-between-vertical-sm: 12px;
    --space-between-vertical-md: 16px;
    --space-between-vertical-lg: 24px;
    --space-between-vertical-xl: 32px;
    --space-between-vertical-2xl: 40px;
    --space-between-vertical-3xl: 48px;
    --space-between-vertical-4xl: 56px;
    --space-between-vertical-5xl: 64px;
    --typescale-weight-regular: regular;
    --booleans-side-sheet-radius: 4px;
    --booleans-top-nav-bar-width: 1440px;
    --booleans-app-bar-width: 1440px;
    --booleans-nav-drawer-menu-item-level2: 48px;
    --booleans-nav-drawer-padding: 24px;
    --booleans-login-radius: 16px;
    --booleans-login-width: 432px;
    --booleans-login-outline: 1px;
    --booleans-sys-error-width: 580px;
    --booleans-sys-error-image-width: 420px;
    --booleans-user-profile-width: 1312px;
    --booleans-user-profile-text-field-width: 394px;
    --booleans-user-profile-radius: 16px;
    --booleans-user-profile-outline: 1px;
    --booleans-user-profile-avatar-group-width: 168px;
    --booleans-avatarmenu-radius: 12px;
    --booleans-avatarmenu-width: 348px;
    --booleans-avatarmenu-outline: 1px;
    --booleans-avatarmenu-type: Horizontal;
    --margin-top-nav: 60px;
    --margin-lg: 24px;
    --margin-xl: 32px;
    --margin-2xl: 40px;
    --margin-3xl: 48px;
    --margin-4xl: 56px;
    --margin-5xl: 64px;
    --margin-6xl: 72px;
    --margin-7xl: 80px;
    --margin-8xl: 88px;
    --margin-9xl: 96px;
    --radius-none: 0px;
    --radius-2xs: 4px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-fully-rounded: 999px;
    --height-md: 16px;
    --height-lg: 24px;
    --height-xl: 32px;
    --height-2xl: 40px;
    --height-icons-md: 16px;
    --height-icons-lg: 20px;
    --height-icons-xl: 24px;
    --height-3xl: 48px;
    --height-4xl: 56px;
    --height-5xl: 64px;
    --height-card-vertical: 96px;
    --width-card-stacked: 360px;
    --width-card-horizontal: 1100px;
    --width-side-nav: 80px;
    --width-icon: 24px;
    --width-screen: 1440px;
    --outline-none: 0px;
    --outline-slight: 0.5px;
    --outline-regular: 1px;
    --outline-considerate: 1.5px;
    --outline-exaggerated: 2px;
  }
}

/* Desktop breakpoint */
@media (min-width: 1600px) {
  :root {
    --padding-top-bottom-none: 0px;
    --padding-top-bottom-2xs: 4px;
    --padding-top-bottom-xs: 8px;
    --padding-top-bottom-sm: 12px;
    --padding-top-bottom-md: 16px;
    --padding-top-bottom-lg: 24px;
    --padding-top-bottom-xl: 32px;
    --padding-top-bottom-2xl: 40px;
    --padding-top-bottom-3xl: 48px;
    --padding-top-bottom-4xl: 56px;
    --padding-top-bottom-5xl: 64px;
    --padding-left-right-none: 0px;
    --padding-left-right-2xs: 4px;
    --padding-left-right-xs: 8px;
    --padding-left-right-sm: 12px;
    --padding-left-right-md: 16px;
    --padding-left-right-lg: 24px;
    --padding-left-right-xl: 32px;
    --padding-left-right-2xl: 40px;
    --padding-left-right-3xl: 48px;
    --padding-left-right-4xl: 56px;
    --padding-left-right-5xl: 64px;
    --space-between-horizontal-none: 0px;
    --space-between-horizontal-2xs: 4px;
    --space-between-horizontal-xs: 8px;
    --space-between-horizontal-sm: 12px;
    --space-between-horizontal-md: 16px;
    --space-between-horizontal-lg: 24px;
    --space-between-horizontal-xl: 32px;
    --space-between-horizontal-2xl: 40px;
    --space-between-horizontal-3xl: 48px;
    --space-between-horizontal-4xl: 56px;
    --space-between-horizontal-5xl: 64px;
    --space-between-vertical-none: 0px;
    --space-between-vertical-2xs: 4px;
    --space-between-vertical-xs: 8px;
    --space-between-vertical-sm: 12px;
    --space-between-vertical-md: 16px;
    --space-between-vertical-lg: 24px;
    --space-between-vertical-xl: 32px;
    --space-between-vertical-2xl: 40px;
    --space-between-vertical-3xl: 48px;
    --space-between-vertical-4xl: 56px;
    --space-between-vertical-5xl: 64px;
    --typescale-weight-regular: regular;
    --booleans-side-sheet-radius: 4px;
    --booleans-top-nav-bar-width: 1920px;
    --booleans-app-bar-width: 1920px;
    --booleans-nav-drawer-menu-item-level2: 48px;
    --booleans-nav-drawer-padding: 24px;
    --booleans-login-radius: 16px;
    --booleans-login-width: 432px;
    --booleans-login-outline: 1px;
    --booleans-sys-error-width: 580px;
    --booleans-sys-error-image-width: 429px;
    --booleans-user-profile-width: 1572px;
    --booleans-user-profile-text-field-width: 394px;
    --booleans-user-profile-radius: 16px;
    --booleans-user-profile-outline: 1px;
    --booleans-user-profile-avatar-group-width: 168px;
    --booleans-avatarmenu-radius: 12px;
    --booleans-avatarmenu-width: 348px;
    --booleans-avatarmenu-outline: 1px;
    --booleans-avatarmenu-type: Horizontal;
    --margin-top-nav: 60px;
    --margin-lg: 24px;
    --margin-xl: 32px;
    --margin-2xl: 40px;
    --margin-3xl: 48px;
    --margin-4xl: 56px;
    --margin-5xl: 64px;
    --margin-6xl: 72px;
    --margin-7xl: 80px;
    --margin-8xl: 88px;
    --margin-9xl: 96px;
    --radius-none: 0px;
    --radius-2xs: 4px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-fully-rounded: 999px;
    --height-md: 16px;
    --height-lg: 24px;
    --height-xl: 32px;
    --height-2xl: 40px;
    --height-icons-md: 16px;
    --height-icons-lg: 20px;
    --height-icons-xl: 24px;
    --height-3xl: 48px;
    --height-4xl: 56px;
    --height-5xl: 64px;
    --height-card-vertical: 96px;
    --width-card-stacked: 360px;
    --width-card-horizontal: 1100px;
    --width-side-nav: 80px;
    --width-icon: 24px;
    --width-screen: 1920px;
    --outline-none: 0px;
    --outline-slight: 0.5px;
    --outline-regular: 1px;
    --outline-considerate: 1.5px;
    --outline-exaggerated: 2px;
  }
}