:root {
  
  --sl-ink:      #101310;   
  --sl-coal:     #1A1E1A;   
  --sl-cream:    #F2E9D8;   
  --sl-charred:  #D6C9B4;   
  --sl-fog:      #B8BCB3;   
  --sl-oxide:    #756D55;   

  
  --sl-bg:        var(--sl-ink);
  --sl-surface:   var(--sl-coal);
  --sl-text:      var(--sl-cream);   
  --sl-text-dim:  var(--sl-fog);     
  --sl-contour:   var(--sl-fog);
  --sl-route:     #F757CE;           
  
  --sl-route-on-paper: #B21991;      

  
  --sl-display: "Alumni Sans", "Alumni Sans Fallback", sans-serif;
  --sl-body:    "Maven Pro", "Maven Pro Fallback", sans-serif;

  
  --sl-hero:     clamp(4.5rem, 8.3vw, 9rem);
  --sl-section:  clamp(2.8rem, 5vw, 5.4rem);
  --sl-title:    clamp(1.65rem, 2.4vw, 2.6rem);
  --sl-stand:    1.25rem;
  --sl-label:    0.72rem;

  
  --sl-paper-shadow: 4px 5px 0 rgba(16, 19, 16, .28);

  
  --sl-t-layer:  240ms;
  --sl-t-lift:   160ms;
  --sl-t-drawer: 520ms;
  --sl-t-story:  180ms;
}


@media (prefers-color-scheme: light) {
  :root:not([data-sl-theme="dark"]) {
    --sl-bg:       var(--sl-cream);
    --sl-surface:  var(--sl-charred);
    --sl-text:     var(--sl-ink);     
    
    --sl-text-dim: #544D3B;           
    --sl-contour:  var(--sl-oxide);   
    --sl-route:    #B21991;           
  }
}


:root[data-sl-theme="light"] {
  --sl-bg:       var(--sl-cream);
  --sl-surface:  var(--sl-charred);
  --sl-text:     var(--sl-ink);
  --sl-text-dim: #544D3B;           
  --sl-contour:  var(--sl-oxide);
  --sl-route:    #B21991;
}
:root[data-sl-theme="dark"] {
  --sl-bg:       var(--sl-ink);
  --sl-surface:  var(--sl-coal);
  --sl-text:     var(--sl-cream);
  --sl-text-dim: var(--sl-fog);
  --sl-contour:  var(--sl-fog);
  --sl-route:    #F757CE;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-t-layer:  0s;
    --sl-t-lift:   0s;
    --sl-t-drawer: 0s;
    --sl-t-story:  0s;
  }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}


:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--sl-route);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sl-bg);
}