/* Font faces */
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/static/vendors/fonts/inter-400.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url("/static/vendors/fonts/inter-500.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url("/static/vendors/fonts/inter-600.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Lora';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/static/vendors/fonts/lora-400.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Lora';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("/static/vendors/fonts/lora-700.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Manrope';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("/static/vendors/fonts/manrope-700.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Manrope';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url("/static/vendors/fonts/manrope-800.woff2") format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Material symbols (Icons) */
@font-face {
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 100 700;
   font-display: swap;
   src: url("/static/vendors/fonts/material-symbols-outlined.woff2") format('woff2');
}

:root {
   /* LAYOUT RESPONSIVE BREAKPOINTS (DOCUMENTATION REFERENCE) */
   /* Mobile landscape / smart systems: 576px */
   --breakpoint-sm: 36rem;
   /* Tablets / narrow display targets: 768px */
   --breakpoint-md: 48rem;
   /* Laptops / standard desktop grid canvases: 1024px */
   --breakpoint-lg: 64rem;
   /* Widescreen monitors / massive displays: 1200px */
   --breakpoint-xl: 75rem;

   /* LAYOUT & STRUCTURAL GEOMETRY */
   /* Sidebar tracks / narrow date blocks */
   --size-layout-xs: 18.75rem;
   /* Small feature grid sections */
   --size-layout-sm: 25rem;
   /* Standard content media panels */
   --size-layout-md: 31.25rem;
   /* Editorial text blocks / wide images */
   --size-layout-lg: 43.75rem;
   /* Section maximum content bounds */
   --size-layout-xl: var(--breakpoint-xl);
   /* Dimension Proportions (Universal Utilities) */
   --size-layout-full: 100%;
   --size-layout-half: 50%;

   /* Structural Layout Aspect Ratios */
   /* Standard widescreen media */
   --aspect-hero: 16 / 9;
   /* Immersive panoramic sections */
   --aspect-banner: 21 / 9;
   /* Avatars, status indicators, icons */
   --aspect-square: 1 / 1;

   /* Grid Framework Channels */
   /* Horizontal gutter spacing mapping */
   --gutter-x: clamp(1rem, 4vw, 1.5rem);
   /* Vertical gutter spacing mapping */
   --gutter-y: clamp(1rem, 4vw, 1.5rem);


   /* SPACING SCALE */
   /* Micro gaps, inline badge padding */
   --spacing-xxs: 0.25rem;
   /* Table cell padding, tight list items */
   --spacing-xs: 0.5rem;
   /* Button padding, functional layouts */
   --spacing-sm: 0.75rem;
   /* Standard grid gaps, card container padding */
   --spacing-md: 1rem;
   /* Section column margins, structural spaces */
   --spacing-lg: 1.5rem;
   /* Hero margins, massive wrapper separation */
   --spacing-xl: 2rem;
   /* Macro structural padding, wrapper separation */
   --spacing-xxl: clamp(3rem, 8vw, 6rem);


   /* COMPONENT GEOMETRY & CORNER RADII */
   /* Light input fields, decorative dividers */
   --stroke-thin: 1px;
   /* Active focus rings, prominent borders */
   --stroke-medium: 2px;
   /* Timeline tracks, accent structural lines */
   --stroke-thick: 4px;

   /* Conservative input / text field wraps */
   --radius-sm: 0.125rem;
   /* Standard buttons, intermediate badges */
   --radius-md: 0.25rem;
   /* Card frames, dropdown menus, standard modules */
   --radius-lg: 0.5rem;
   /* Prominent content blocks, modal panels */
   --radius-xl: 0.75rem;
   /* 1:1 Aspect ratio circles (Avatars, dots) */
   --radius-full: 50%;
   /* Asymmetric shape capping for buttons/tags */
   --radius-pill: 99.9rem;


   /* CORE BRAND & INTERACTIVE COLOR SYSTEM */
   /* Core anchor actions (Buttons, links) */
   --color-brand-primary: #02183f;
   /* Hover/Focus primary state transitions */
   --color-brand-primary-hover: #072349;
   /* Inactive accents, supporting indicators */
   --color-brand-primary-subtle: #426586;
   /* Light backgrounds behind primary content */
   --color-brand-primary-container: #e6edf7;
   /* Text sitting inside solid primary actions */
   --color-on-primary: #ffffff;

   /* Primary Variants for Inverted/Dark Surfaces */
   /* Luminous primary color optimized for dark layouts */
   --color-inverse-primary: #5c8fc2;
   /* Deep contrast text color to sit inside the inverse action */
   --color-on-inverse-primary: #02183f;

   /* Secondary Interactive System */
   /* Secondary structural elements */
   --color-brand-secondary: #072349;
   /* Hover state secondary transitions */
   --color-brand-secondary-hover: #02183f;
   /* Light secondary background panels */
   --color-brand-secondary-container: #e2e9f3;
   /* Text sitting inside solid secondary items */
   --color-on-secondary: #ffffff;


   /* NEUTRAL SURFACES & INTERFACE BACKGROUNDS */
   /* Light canvas application backdrop */
   --color-bg-light: #f9f9f9;
   /* Dark canvas backdrop (Footers, dark mode) */
   --color-bg-dark: #161b22;
   /* Light gray backdrop (Disabled sections) */
   --color-bg-disabled: #f1f5f9;


   /* TYPOGRAPHY SYSTEM FOUNDATIONS */
   /* Font Families */
   --font-headline: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-serif: 'Lora', 'Georgia', 'Cambria', 'Times New Roman', serif;
   --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;


   /*Font Size Scale - Fully Responsive */
   /* Micro labels, metadata captions */
   --font-size-xs: clamp(0.7rem, 1.5vw, 0.75rem);
   /* Supporting sidebar data, input field entries */
   --font-size-sm: clamp(0.8rem, 2vw, 0.875rem);
   /* Baseline paragraph body reading default */
   --font-size-md: clamp(0.95rem, 2.5vw, 1rem);
   /* Article subheadings, card headers */
   --font-size-lg: clamp(1.15rem, 3vw, 1.35rem);
   /* Main display section titles */
   --font-size-xl: clamp(1.5rem, 4vw, 2.5rem);


   /* Semantic Font Color Tokens */
   /* Primary contrast text (Headings, titles) */
   --color-text-main: #02183f;
   /* Secondary reading copy, form placeholders */
   --color-text-muted: #426586;
   /* Completely inactive typography / controls */
   --color-text-disabled: #bbbbbb;
   /* Pure white contrast copy for dark boxes */
   --color-text-white: #ffffff;
   /* Subtle off-white contrast accent copy */
   --color-text-light: #eeeeee;


   /* BOUNDARIES, SEPARATORS & INTERFACE OUTLINES */
   /* Default standard outline for inputs/forms */
   --color-border-light: #cccccc;
   /* Subtle light dividers on table rows / cards */
   --color-border-gray: #dbdbdb;
   /* High-contrast rules or active focus frames */
   --color-border-dark: #787878;


   /* SEMANTIC STATE COLOR PALETTES */
   /* Success State */
   /* Positive state anchor color */
   --color-success: #29a362;
   /* Soft notification box backgrounds */
   --color-success-container: #f0fbf5;
   /* High-legibility text inside alert boxes */
   --color-on-success-container: #134e2e;
   /* White text inside solid green layers */
   --color-on-success: #ffffff;

   /* Info State */
   /* Informational status anchor color */
   --color-info: #2196f3;
   /* Soft info banner backgrounds */
   --color-info-container: #f0f7fe;
   /* High-legibility text inside alert boxes */
   --color-on-info-container: #0b4674;
   /* White text inside solid blue layers */
   --color-on-info: #ffffff;

   /* Error State */
   /* Destructive warning anchor color */
   --color-error: #dc2626;
   /* Soft error/alert banner backgrounds */
   --color-error-container: #fef2f2;
   /* High-legibility text inside alert boxes */
   --color-on-error-container: #7f1d1d;
   /* White text inside solid red layers */
   --color-on-error: #ffffff;


   /* SPATIAL GEOMETRY & SHADOW SYSTEM */
   /* Default dark ambient light drop baseline */
   --color-shadow-default: #0f172a;

   /* Inline tags / tiny tags */
   --spatial-shadow-xs: 0 1px 2px;
   --opacity-shadow-xs: 5%;
   /* Small cards / text frames */
   --spatial-shadow-sm: 0 2px 4px;
   --opacity-shadow-sm: 6%;
   /* Nav bars / grid elements */
   --spatial-shadow-md: 0 4px 12px;
   --opacity-shadow-md: 10%;
   /* Popovers / Flyout layers */
   --spatial-shadow-lg: 0 10px 25px;
   --opacity-shadow-lg: 15%;
   /* Fixed modals / dialogs */
   --spatial-shadow-xl: 0 20px 40px -10px;
   --opacity-shadow-xl: 25%;
}


/* UTILITY CLASSES & GLOBAL ICON CONFIGURATION */
.material-symbols-outlined {
   font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   font-feature-settings: "liga";
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
}