/* ================== */
/*  :root: Version 4  */
/* ================== */

:root {
    /* Meta */
    overscroll-behavior: none;
    color-scheme: light;
  
    /* Primary */
    --clr-brand:            #214835;
    --clr-accent:           #fdbe3f;
    --clr-selection:        #21483533;
  
    /* Secondary */
    --clr-bg:               #ffffff;
    --clr-bg-alt:           #214835;
    --clr-bg-highlight:     oklab(18.3425% -0.0527 0.01845);
    --clr-surface:          #eef0ed;
    --clr-surface-alt:      #145645;
    --clr-border:           #d0d5cc;
    --clr-border-hover:     #a8b0a4;
  
    /* Text */
    --clr-text:                 #1a1f18;
    --clr-text-highlight:       #000000;
    --clr-text-muted:           #4f5a4c;
    --clr-text-disabled:        #8a9487;
    --clr-text-placeholder:     #9aa396;

    --clr-text-inv:             #f4f6f4;
    --clr-text-highlight-inv:   #ffffff;
    --clr-text-muted-inv:       #697466;
    --clr-text-disabled-inv:    #343c31;
    --clr-text-placeholder-inv: #282f25;
  
    /* States */
    --clr-info:         #00a0e6;
    --clr-info-alt:     #d9eefc;
    
    --clr-success:      #3ba458;
    --clr-success-alt:  #dceddd;
    
    --clr-warning:      #d4a418;
    --clr-warning-alt:  #faecd7;
    
    --clr-error:        #f45e60;
    --clr-error-alt:    #ffe2de;

    /* Animations */
    --fn-0:     cubic-bezier(0.4, 0, 0.2, 1);
    --fn-0-in:  cubic-bezier(0.4, 0, 1, 1);
    --fn-0-out: cubic-bezier(0, 0, 0.2, 1);

    --duration-instant: 50ms;
    --duration-fast:    75ms;
    --duration-snappy:  150ms;
    --duration-normal:  300ms;
    --duration-slow:    500ms;
    --duration-slower:  1500ms;
    --duration-slowest: 3000ms;

    /* Presets */
    --transition:           var(--duration-normal) var(--fn-0);

    /* Measurements */
    --radius:               .5rem;
    --border-width:         2px;
    
    --content-width:        75vw;
    --nav-height:           3rem;
    --nav-padding:          .25rem;

    --sidebar-width:        2.25rem;
    --sidebar-point-width:  0.75rem;

    /* Dynamic color inversion */
    
    --d-clr-text:                   light-dark(var(--clr-text), var(--clr-text-inv));
    --d-clr-text-highlight:         light-dark(var(--clr-text-highlight), var(--clr-text-highlight-inv));
    --d-clr-text-muted:             light-dark(var(--clr-text-muted), var(--clr-text-muted-inv));
    --d-clr-text-disabled:          light-dark(var(--clr-text-disabled), var(--clr-text-disabled-inv));
    --d-clr-text-placeholder:       light-dark(var(--clr-text-placeholder), var(--clr-text-placeholder-inv));

    --d-clr-text-inv:               light-dark(var(--clr-text-inv), var(--clr-text));
    --d-clr-text-highlight-inv:     light-dark(var(--clr-text-highlight-inv), var(--clr-text-highlight));
    --d-clr-text-muted-inv:         light-dark(var(--clr-text-muted-inv), var(--clr-text-muted));
    --d-clr-text-disabled-inv:      light-dark(var(--clr-text-disabled-inv), var(--clr-text-disabled));
    --d-clr-text-placeholder-inv:   light-dark(var(--clr-text-placeholder-inv), var(--clr-text-placeholder));
    


    /* Responsive */

    @media (max-width: 768px) {
        --content-width:    90vw;
    }
    @media (max-width: 480px) {
        --content-width:    calc(100vw - var(--nav-padding) * 2);
    }
    @media (prefers-reduced-motion: reduce) {
        --transition:       none;
    }
}