:root {
  color-scheme: light;

  --ink:            #ffffff;
  --ink-2:          #f7f5f1;
  --ink-3:          #efece5;
  --slate:          #ffffff;
  --slate-2:        #f7f5f1;
  --hairline:       #e3ded4;
  --hairline-soft:  #efece5;

  --brand:          #14705c;
  --brand-hover:    #0f5b4a;
  --brand-bright:   #0e6350;
  --brand-deep:     #0a4335;
  --brand-wash:     #e8f2ef;
  --brand-line:     #bcd9d1;
  --on-brand:       #ffffff;

  --sand:           #f3ead9;
  --sand-deep:      #e6d7ba;
  --clay:           #b4541f;
  --clay-wash:      #fbeee6;

  --violet:         #14705c;
  --violet-bright:  #0e6350;
  --violet-deep:    #0a4335;
  --violet-wash:    #e8f2ef;
  --violet-line:    #bcd9d1;
  --on-violet:      #ffffff;

  --vital:          #14705c;
  --vital-dim:      #1c8c73;
  --vital-wash:     #e8f2ef;
  --on-vital:       #ffffff;

  --amber:          #8a5a08;
  --amber-wash:     #fbf1de;
  --rose:           #b32741;
  --rose-wash:      #fceef0;
  --sky:            #14578f;
  --sky-wash:       #e8f1f9;

  --bone:           #16211e;
  --bone-dim:       #43514d;
  --muted:          #667670;
  --muted-deep:     #9aa5a0;

  --nav-bg:         rgba(255, 255, 255, 0.92);
  --drawer-bg:      rgba(255, 255, 255, 0.98);
  --panel-glass:    #ffffff;
  --ambient-1:      rgba(20, 112, 92, 0.05);
  --ambient-2:      rgba(243, 234, 217, 0.55);
  --ambient-3:      rgba(20, 112, 92, 0.035);
  --trace-glow:     0 0 3px rgba(20, 112, 92, 0.22);
  --grid-ink:       rgba(0, 0, 0, 0.045);

  --tile-l1: 93%;  --tile-s1: 34%;
  --tile-l2: 86%;  --tile-s2: 28%;
  --tile-text-l: 26%; --tile-text-s: 42%;
  --tile-border-l: 84%; --tile-border-s: 26%;

  --font-display: "Figtree", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Figtree", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-mega:   clamp(2.6rem, 5.4vw, 4.3rem);
  --fs-h1:     clamp(2rem, 3.9vw, 3.05rem);
  --fs-h2:     clamp(1.6rem, 2.7vw, 2.3rem);
  --fs-h3:     clamp(1.14rem, 1.6vw, 1.34rem);
  --fs-lead:   clamp(1.06rem, 1.4vw, 1.2rem);
  --fs-body:   1.02rem;
  --fs-sm:     0.92rem;
  --fs-xs:     0.82rem;
  --fs-micro:  0.74rem;

  --lh-tight: 1.08;
  --lh-snug:  1.24;
  --lh-body:  1.68;

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 88px;  --s10: 112px; --s11: 144px;

  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 33, 30, .05);
  --shadow-md: 0 6px 20px -8px rgba(22, 33, 30, .14);
  --shadow-lg: 0 20px 48px -22px rgba(22, 33, 30, .22);
  --glow-violet: 0 0 0 1px var(--brand-line), 0 12px 32px -18px rgba(20, 112, 92, .3);
  --glow-vital:  0 0 0 1px var(--brand-line), 0 10px 26px -16px rgba(20, 112, 92, .26);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: 140ms;  --t-base: 260ms;  --t-slow: 620ms;

  --wrap: 1200px;  --wrap-narrow: 740px;  --wrap-wide: 1400px;  --nav-h: 72px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --ink:            #0d1412;
  --ink-2:          #131c19;
  --ink-3:          #1a2521;
  --slate:          #16201d;
  --slate-2:        #1d2925;
  --hairline:       #2a3833;
  --hairline-soft:  #212d29;

  --brand:          #2fa387;
  --brand-hover:    #38b899;
  --brand-bright:   --brand;
  --brand-deep:     #1c7360;
  --brand-wash:     rgba(47, 163, 135, 0.13);
  --brand-line:     rgba(47, 163, 135, 0.32);
  --on-brand:       #06201a;

  --sand:           #24302a;
  --sand-deep:      #2d3a33;
  --clay:           #e08a58;
  --clay-wash:      rgba(224, 138, 88, 0.12);

  --violet:         #2fa387;
  --violet-bright:  #57c9ad;
  --violet-deep:    #1c7360;
  --violet-wash:    rgba(47, 163, 135, 0.13);
  --violet-line:    rgba(47, 163, 135, 0.32);
  --on-violet:      #06201a;

  --vital:          #3fbf9e;
  --vital-dim:      #2fa387;
  --vital-wash:     rgba(63, 191, 158, 0.12);
  --on-vital:       #06201a;

  --amber:          #e8b45c;
  --amber-wash:     rgba(232, 180, 92, 0.12);
  --rose:           #ef7089;
  --rose-wash:      rgba(239, 112, 137, 0.12);
  --sky:            #63b3e8;
  --sky-wash:       rgba(99, 179, 232, 0.12);

  --bone:           #e9efec;
  --bone-dim:       #b2bfbb;
  --muted:          #869590;
  --muted-deep:     #5d6a65;

  --nav-bg:         rgba(13, 20, 18, 0.88);
  --drawer-bg:      rgba(13, 20, 18, 0.98);
  --panel-glass:    #16201d;
  --ambient-1:      rgba(47, 163, 135, 0.10);
  --ambient-2:      rgba(47, 163, 135, 0.045);
  --ambient-3:      rgba(28, 115, 96, 0.09);
  --trace-glow:     0 0 6px rgba(63, 191, 158, 0.4);
  --grid-ink:       rgba(255, 255, 255, 0.04);

  --tile-l1: 24%;  --tile-s1: 34%;
  --tile-l2: 16%;  --tile-s2: 28%;
  --tile-text-l: 84%; --tile-text-s: 44%;
  --tile-border-l: 32%; --tile-border-s: 26%;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 56px -24px rgba(0,0,0,.7);
  --glow-violet: 0 0 0 1px var(--brand-line), 0 14px 40px -20px rgba(47,163,135,.4);
  --glow-vital:  0 0 0 1px var(--brand-line), 0 12px 32px -18px rgba(63,191,158,.34);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}