@font-face {
  font-family: 'Labil Grotesk';
  src: url('/assets/fonts/Vn9tRhmf3f1SHKCEDQDq2yeH4Y.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('/assets/fonts/LabilGrotesk-Regular.woff2') format('woff2'),
       url('/assets/fonts/cL49hcMF62coqNjQLMbb57xao.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('/assets/fonts/LabilGrotesk-Medium.woff2') format('woff2'),
       url('/assets/fonts/HyzXhOTG1xPnYGP75gAMr4ac5o.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Labil Grotesk';
  src: url('/assets/fonts/LabilGrotesk-Bold.woff2') format('woff2'),
       url('/assets/fonts/3XwxSbkXyGz2NTtZP0M3ktMkDw.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('/assets/fonts/FragmentMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Hoves';
  src: url('/assets/fonts/TTHoves-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --coa-font-display: 'Labil Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --coa-font-sans: 'Labil Grotesk', 'TT Hoves', -apple-system, BlinkMacSystemFont, sans-serif;
  --coa-font-ui: 'TT Hoves', 'Labil Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --coa-font-mono: 'Fragment Mono', 'SF Mono', 'JetBrains Mono', monospace;

  
  --font-display: var(--coa-font-display);
  --font-sans: var(--coa-font-sans);
  --font-ui: var(--coa-font-ui);
  --font-mono: var(--coa-font-mono);

  

  

  
  --coa-bg-canvas: #F2F4FA;
  --coa-bg-primary: #F2F4FA;
  --coa-bg-surface: #FFFFFF;
  --coa-bg-ice: #F0F2FA;
  --coa-bg-lab-gray: #E6EAED;
  --coa-bg-lavender: #E6EAFA;
  --coa-bg-elevated: #F7F9FC;
  --coa-bg-mint: #EFFAF7;
  --coa-bg-cobalt-soft: #EEF2FF;
  --coa-bg-indigo-stage: #020C3D;
  --coa-bg-glass: rgba(255, 255, 255, 0.86);

  
  --bg-primary: var(--coa-bg-canvas);
  --bg-surface: var(--coa-bg-surface);
  --bg-elevated: var(--coa-bg-elevated);

  
  --coa-ink-navy: #020C3D;
  --coa-ink-molecular: #223180;
  --coa-ink-slate: #3B4861;
  --coa-ink-muted: #687692;
  --coa-text-primary: #0F172A;
  --coa-text-secondary: #3B4861;
  --coa-text-muted: #687692;
  --ink-primary: var(--coa-ink-navy);
  --ink-secondary: var(--coa-ink-slate);
  --ink-muted: var(--coa-ink-muted);

  
  --coa-accent-cobalt: #5771FE;
  --coa-accent-blue: #5771FE;
  --coa-accent-periwinkle: #9AAAFE;
  --coa-accent-cyan: #59EBE3;
  --coa-accent-emerald: #0D7A5F;
  --coa-accent-teal: #127868;
  --coa-status-pass: #15803D;
  --coa-status-pass-bg: #DCFCE7;
  --accent-cobalt: var(--coa-accent-cobalt);
  --accent-teal: var(--coa-accent-teal);
  --status-pass: var(--coa-status-pass);

  
  --coa-border-ledger: #D8DCEB;
  --coa-border-hairline: rgba(0, 0, 0, 0.08);
  --coa-border-strong: #B8C1DC;
  --border-hairline: var(--coa-border-ledger);
  --border-strong: var(--coa-border-strong);
  --coa-shadow-card: 0 12px 32px rgba(2, 12, 61, 0.05);
  --coa-shadow-elevated: 0 22px 54px rgba(2, 12, 61, 0.10);

  
  --coa-space-2xs: 4px;
  --coa-space-xs: 8px;
  --coa-space-sm: 12px;
  --coa-space-md: 16px;
  --coa-space-lg: 24px;
  --coa-space-xl: 32px;
  --coa-space-2xl: 48px;
  --coa-space-3xl: 64px;
  --coa-space-4xl: 96px;

  
  --coa-frame-bg: #FFFFFF;
  --coa-frame-pad: 12px;
  --coa-frame-gap: 12px;

  
  --coa-radius-none: 0px;       
  --coa-radius-xs: 2px;         
  --coa-radius-sm: 4px;         
  --coa-radius-md: 6px;         
  --coa-radius-stage: 6px;      
  --coa-radius-card: 6px;       
  --coa-radius-btn: 6px;        
  --coa-radius-chip: 6px;       
  --coa-radius-nav: 6px;        
  --coa-stage-radius: var(--coa-radius-stage);
  --coa-card-radius: var(--coa-radius-card);

  
  --coa-nav-bg: #F0F2FA;
  --coa-nav-height: 37px;
  --coa-molecule-hero-bg: #5771FE;
  --coa-nav-pad: 6px 12px;
  --coa-nav-top-offset: 12px;
  --coa-nav-mask-height: 31px;
  --coa-nav-link-font-size: 14px;
  --coa-nav-link-pad: 3px 12px 4px 12px;
  --coa-nav-link-color: #020C3D;

  
  --coa-molecule-video-blend: luminosity;
  --coa-molecule-hero-blur-bg: linear-gradient(251deg, rgba(34, 50, 128, 0) 0%, rgb(69, 69, 69) 100%);
  --coa-molecule-hero-blur-mask: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 82%);
  --coa-molecule-hero-blur-blend: hard-light;
  --coa-molecule-hero-blur-opacity: 0.56;
  --coa-molecule-mid-blur-bg: linear-gradient(270deg, rgba(87, 112, 255, 0) 0%, rgb(171, 154, 237) 58%);
  --coa-molecule-mid-blur-mask: linear-gradient(-90deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 1) 83%);
  --coa-molecule-footer-bg: #020C3D;
  --coa-molecule-footer-glow: radial-gradient(53% 66% at 12.5% 91.2%, #223180 0%, rgba(0, 0, 0, 0) 100%);
  --coa-floating-card-bg: rgba(87, 113, 254, 0.52);
  --coa-floating-card-border: rgba(255, 255, 255, 0.25);

  
  --coa-chrome-bg: linear-gradient(145deg, #E3E7F0 0%, #D5DAE6 48%, #EDF0F7 100%);
  --coa-header-bg: linear-gradient(180deg, rgba(203, 212, 225, 0.90) 0%, rgba(190, 200, 216, 0.76) 100%);
  --coa-box-purity: rgba(218, 196, 202, 0.50);
  --coa-box-identity: rgba(214, 200, 224, 0.50);
  --coa-box-quantity: rgba(196, 188, 228, 0.54);
  --coa-holo-1: #ff4d79;
  --coa-holo-2: #ff9a3c;
  --coa-holo-3: #ffe14d;
  --coa-holo-4: #3cff9a;
  --coa-holo-5: #3cc8ff;
  --coa-holo-6: #9d5cff;

  
  --coa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --coa-ease-in-out: cubic-bezier(0.44, 0, 0.56, 1);
  --coa-grid-max: 1380px;
  --grid-max: var(--coa-grid-max);
}