@font-face {
  font-family: 'Söhne';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/soehne-buch.woff2') format('woff2');      
}

@font-face {
  font-family: 'Mona Sans';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/assets/fonts/mona-sans.woff2') format('woff2-variations');
}

:root {
  color-scheme: light;

  --grotesk: 'Söhne', 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sub:     'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --bg:            #f9fafb;   
  --surface:       #f3f4f6;   
  --surface-2:     #e8eaed;   
  --hover:         #eceff2;   
  --text:          #1a1a1a;   
  --text-2:        #4a4a4a;   
  --text-mute:     #686868;   
  --border:        #e2e4e8;   
  --border-strong: #c8ccd2;
  --signal:        #d99f2b;   
  --signal-hi:     #b9821b;   
  --signal-dim:    #8a6512;
  --signal-text:   #8a6512;   
  --on-signal:     #2a1d05;   
  --on-signal-hi:  #2a1d05;   
  --alert:         #c8390d;
  --nav-bg:        rgb(249, 250, 251);  
  --nav-shadow:    0 0.0625rem 0.125rem rgba(20, 22, 26, 0.05), 0 0.375rem 1rem rgba(20, 22, 26, 0.06);

  --space-xs: 0.25rem;  --space-sm: 0.5rem;  --space-md: 0.75rem; --space-lg: 1rem;
  --space-xl: 1.25rem; --space-2xl: 1.5rem; --space-3xl: 2rem; --space-4xl: 2.5rem;
  --gutter: 3.25rem;   --section: var(--sec-pad);

  --sec-pad:      clamp(3.75rem, 6.75vw, 5.625rem);   
  --sec-pad-sm:   clamp(2.5rem, 8vw,  3.5rem);    
  --sec-gap:      clamp(1.25rem, 2.5vw, 2.5rem);   
  --block-gap:    clamp(2.25rem, 4.5vw, 4rem);   
  --block-gap-sm: clamp(1.5rem, 3vw,  2.5rem);    
  --hero-pad:     clamp(7.5rem, 12vw, 11rem);  
  --band-pad:     clamp(1.75rem, 3.5vw, 3rem);   

  --radius: 0;                                   
  --radius-panel: clamp(0.5rem, 1vw, 0.875rem);         
  --radius-card: 0.625rem;                           
  --radius-sm: 0.375rem;                              
  --surface-raised: #ffffff;                     
  --hairline: 0.0625rem; --hairline-half: 0.03125rem;
  --margin: clamp(1.25rem, 4.5vw, 4rem);
  --maxw: 82.5rem;
  --secw: calc(var(--maxw) * 1.25);   

  --viz-warm-1: #ff7847; --viz-warm-2: #ed5f2f; --viz-warm-3: #cf4f24;
  --viz-warm-4: #a8421f; --viz-warm-5: #7e351b; --viz-warm-6: #8f3a1d;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);         
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);   
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #26292c;   
  --surface:       #2e3134;   
  --surface-2:     #1e2123;   
  --hover:         #383b3f;
  --text:          #f4f5f5;
  --text-2:        #a9acae;
  --text-mute:     #a0a4ab;   
  --border:        #35383b;
  --border-strong: #4a4e51;
  --signal:        #e6b13f;
  --signal-hi:     #f3c860;
  --signal-dim:    #b6892b;
  --signal-text:   #e6b13f;   
  --on-signal:     #2a1d05;
  --on-signal-hi:  #2a1d05;   
  --surface-raised: #2e3134;
  --alert:         #e8542a;
  --nav-bg:        rgb(38, 41, 44);  
  --nav-shadow:    0 0.0625rem 0.125rem rgba(0, 0, 0, 0.28), 0 0.375rem 1rem rgba(0, 0, 0, 0.22);
}

:root { font-size: 16px; }
@media (min-width: 1240px) {
  :root {
    
    font-size: clamp(12.48px, calc(12.48px + (100vw - 1512px) * 0.00875), 15px);
  }
}

@media (max-width: 1024px) {
  :root { --margin: clamp(1.25rem, 3vw, 2rem); }
}
@media (max-width: 760px) {
  :root { --margin: clamp(0.875rem, 4vw, 1.5rem); }
}