:root{
  color-scheme: light;

  --brand-green:  #0B6619;
  --brand-forest: #0F8C22;
  --brand-leaf:   #12A628;
  --brand-vivid:  #14B32B;
  --brand-glow:   #1BF23B;

  --ink-deep:     #0A1A0E;

  --brand-carbon: #151A17;
  --brand-abyss:  #0C100D;

  --color-ink:       #141A15;
  --color-slate:     #454B46;
  --color-gray:      #6B726C;
  --color-line:      #E2E7E2;
  --color-white:     #FFFFFF;
  --color-off-white: #FAFCFA;

  --canvas:    var(--color-off-white);
  --card:      var(--color-white);
  --wash:      #EDF7EE;
  --cool-wash: #D7F0DB;
  --inverted:  var(--brand-carbon);

  --text:        var(--color-slate);
  --text-muted:  var(--color-gray);
  --heading:     var(--color-ink);
  --action-text: var(--brand-green);

  --action-bg:        var(--brand-green);
  --action-fg:        #fff;
  --action-bg-hover:  var(--brand-vivid);
  --action-fg-hover:  var(--ink-deep);

  --border:        var(--color-line);
  --border-strong: #C4CCC5;
  --border-field:  #858C86;

  --color-error:   #C9343A;

  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-eyebrow:     12px;   --tracking-eyebrow:  0.057em;
  --text-caption:     14px;
  --text-body-sm:     16px;   --tracking-body-sm: -0.010em;
  --text-body:        18px;   --tracking-body:    -0.012em;
  --text-subheading:  32px;   --tracking-sub:     -0.008em;
  --tracking-heading: -0.012em;

  --fw-regular:400; --fw-semibold:600; --fw-bold:700;

  --space-4:4px;   --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px;
  --space-48:48px; --space-64:64px; --space-96:96px;

  --radius-button: 4px;
  --radius-card:   16px;
  --radius-round:  90px;

  --shadow-nav:     rgba(10, 26, 14, .10) 0 1px 3px 0;
  --shadow-nav-up:  rgba(10, 26, 14, .14) 0 5px 20px 0;
  --shadow-focus:   var(--brand-green) 0 0 0 1px inset;
  --focus-ring:     var(--brand-green);

  --container: 1200px;
  --gutter: 24px;
  --section-gap: 96px;
  --card-padding: 24px;
  --header-h: 92px;

  --ease: cubic-bezier(.165, .84, .44, 1);
  --dur: .42s;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --canvas:    #121612;
    --card:      #1C211D;
    --wash:      #1A211C;
    --cool-wash: #1E2A21;
    --inverted:  var(--brand-carbon);

    --text:        #ACB3AD;
    --text-muted:  #878E88;
    --heading:     #F3F7F3;
    --action-text: var(--brand-glow);

    --action-bg:        var(--brand-vivid);
    --action-fg:        var(--ink-deep);
    --action-bg-hover:  var(--brand-glow);
    --action-fg-hover:  var(--ink-deep);

    --border:        #2F352F;
    --border-strong: #4A514B;
    --border-field:  #717871;
    --color-error:   #FF8A8F;
    --focus-ring:    var(--brand-glow);
    --shadow-focus:   var(--brand-glow) 0 0 0 1px inset;

    --shadow-nav:     rgba(0, 0, 0, .40) 0 1px 3px 0;
    --shadow-nav-up:  rgba(0, 0, 0, .55) 0 5px 20px 0;
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:    #121612;
  --card:      #1C211D;
  --wash:      #1A211C;
  --cool-wash: #1E2A21;
  --inverted:  var(--brand-carbon);

  --text:        #ACB3AD;
  --text-muted:  #878E88;
  --heading:     #F3F7F3;
  --action-text: var(--brand-glow);

  --action-bg:        var(--brand-vivid);
  --action-fg:        var(--ink-deep);
  --action-bg-hover:  var(--brand-glow);
  --action-fg-hover:  var(--ink-deep);

  --border:        #2F352F;
  --border-strong: #4A514B;
  --border-field:  #717871;
  --color-error:   #FF8A8F;
  --focus-ring:    var(--brand-glow);
  --shadow-focus:   var(--brand-glow) 0 0 0 1px inset;

  --shadow-nav:     rgba(0, 0, 0, .40) 0 1px 3px 0;
  --shadow-nav-up:  rgba(0, 0, 0, .55) 0 5px 20px 0;
}