.button {
  --btn_c: var(--body_c);
  --btn_bg: var(--body_bg);
  --btn_b-c: var(--btn_bg);

  --_btn_c: var(--btn-type_c, var(--btn_c));
  --_btn_bg: var(--btn-type_bg, var(--btn_bg, var(--body-bg)));
  --_btn_b-c: var(--btn-type_b-c, var(--btn_b-c));

  --_btn_d: var(--btn_d, inline-block);
  --_btn_f-s: var(--btn_f-s, 1rem);
  --_btn_l-h: var(--btn_l-h, 1.2);
  /* 0.6em + line-height 1.2 + 1px borders = the 40px Figma button. */
  --_btn_p-b: var(--btn_p-b, 0.6em);
  --_btn_p-i: var(--btn_p-i, 1.2em);
  --_btn_b: var(--btn_b, var(--_btn_b-w) var(--_btn_b-s) var(--btn-state_b-c, var(--_btn_b-c)));
  --_btn_b-w: var(--btn_b-w, 1px);
  --_btn_b-s: var(--btn_b-s, solid);
  --_btn_b-r: var(--btn_b-r, var(--b-r));
  --_btn_t: color 0.3s ease-in-out, background 0.3s ease-in-out, border-color 0.3s ease-in-out, outline 0.1s ease-in-out;
  --_btn_cursor: var(--btn_cursor, pointer);
  --_btn_t-a: var(--btn_t-a, center);
  --_btn_t-d: var(--btn_t-d, none);
  --_btn_o-o: var(--btn_o-o, 2px);
  --_btn_o-w: var(--btn_o-w, 0px);
  --_btn_o-s: var(--btn_o-s, solid);
  --_btn_o-c: var(--btn_o-c, transparent);

  /* === Mix Colors === */
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--c-white);
  --_btn-mix_c: var(--btn-mix_c, var(--csstools-light-dark-toggle--0, var(--c-black)));
  --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--c-black);
  --_btn-mix_c-d: var(--btn-mix_c-d, var(--csstools-light-dark-toggle--1, var(--c-white)));

  /* === States === */
  --_btn_c_f: var(--btn_c_f, var(--_btn_c));
  --_btn_c_a: var(--btn_c_a, var(--_btn_c));

  /* === Styles === */
  color: var(--btn-state_c, var(--_btn_c));
  background: var(--btn-state_bg, var(--_btn_bg));
  border: var(--_btn_b);
  display: var(--_btn_d);
  padding-block: var(--btn-type_p-b, var(--_btn_p-b));
  padding-inline: var(--btn-type_p-i, var(--_btn_p-i));
  border-radius: var(--_btn_b-r);
  font-size: var(--_btn_f-s);
  font-weight: var(--_btn_f-w, 500);
  line-height: var(--_btn_l-h);
  cursor: var(--_btn_cursor);
  transition: var(--btn_transition, var(--_btn_t));
  text-align: var(--_btn_t-a);
  -webkit-text-decoration: var(--_btn_t-d);
  text-decoration: var(--_btn_t-d);
  outline-offset: var(--_btn_o-o);
  outline: var(--_btn_o-w) var(--_btn_o-s) var(--_btn_o-c);
}
  .button * {
  --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--c-white);
  --_btn-mix_c: var(--btn-mix_c, var(--csstools-light-dark-toggle--0, var(--c-black)));
  --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--c-black);
  --_btn-mix_c-d: var(--btn-mix_c-d, var(--csstools-light-dark-toggle--1, var(--c-white)));
}

  /* Every button fills brown on hover/focus unless its variant says otherwise. */
  .button.hover,
  .button:hover {
    --btn-state_c: var(--btn_c_h, var(--c-white));
    --btn-state_bg: var(--btn_bg_h, var(--c-earth-dark));
    --btn-state_b-c: var(--btn_b-c_h, var(--btn-state_bg));
  }
  .button:focus,
  .button:focus-visible {
    --btn-state_c: var(--btn_c_f, var(--c-white));
    --btn-state_bg: var(--btn_bg_f, var(--c-earth-dark));
    --btn-state_b-c: var(--btn_b-c_f, var(--btn-state_bg));

    --_btn_o-w: 2px;
    --_btn_o-c: var(--btn_bg_f, var(--btn-state_bg));
  }
  .button.active,
  .button:active {
    --btn-state_c: var(--btn_c_a, var(--c-white));
    --btn-state_bg: var(--btn_bg_a, color-mix(in oklab, var(--c-earth-dark), var(--_btn-mix_c) 15%));
    --btn-state_b-c: var(--btn_b-c_a, var(--btn-state_bg));
  }
  .button:disabled,
  .button[disabled],
  .button[aria-disabled="true"] {
    --btn-state_c: var(--btn_c_d, var(--_btn_c));
    --btn-state_bg: var(--btn_bg_d, var(--_btn_bg));
    --btn-state_b-c: var(--btn_b-c_d, var(--_btn_b-c));
    --_btn_cursor: var(--btn_cursor-disabled, not-allowed);

    opacity: 0.6;
    pointer-events: none;
  }
  /* === OUTLINE. === */
  .button.button-outline {
    --_btn-outline_c: var(--btn_c);
    --_btn-outline_bg: var(--btn_bg);

    --btn-type_bg: transparent;
    --btn-type_c: var(--btn_bg);
    --btn-type_b-c: var(--btn-type_c);

    --btn_c_h: var(--_btn-outline_c);
    --btn_c_a: var(--_btn-outline_c);
    --btn_c_f: var(--_btn-outline_c);

    --btn_bg_h: var(--_btn-outline_bg);
    --btn_bg_a: color-mix(in oklab, var(--_btn-outline_bg), var(--_btn-mix_c-d) 20%);
    --btn_bg_f: color-mix(in oklab, var(--_btn-outline_bg), var(--_btn-mix_c-d) 10%);

    --btn_b-c_h: var(--btn_bg_h);
    --btn_b-c_a: color-mix(in oklab, var(--_btn-outline_bg), var(--_btn-mix_c-d) 20%);
    --btn_b-c_f: color-mix(in oklab, var(--_btn-outline_bg), var(--_btn-mix_c-d) 10%);
  }
  /* === GHOST. === */
  .button.button-ghost {
    --_btn_b: none;

    --_btn-ghost_c: var(--btn_c);
    --_btn-ghost_bg: var(--btn_bg);

    --btn-type_bg: transparent;
    --btn-type_c: var(--_btn-ghost_bg);
    --btn-type_p-b: calc(var(--_btn_p-b) + var(--_btn_b-w));
    --btn-type_p-i: calc(var(--_btn_p-i) + var(--_btn_b-w));

    --btn_bg_h: color-mix(in oklab, var(--_btn-ghost_bg), transparent 80%);
    --btn_bg_a: color-mix(in oklab, var(--_btn-ghost_bg), transparent 85%);
    --btn_bg_f: var(--btn_bg_h);
  }
  /* === CLEAR. === */
  .button.button-clear {
    --_btn-clear_c: var(--btn-clear_c, var(--btn_bg));

    --btn-type_c: var(--_btn-clear_c);
    --btn-type_bg: transparent;

    --btn_c_h: var(--_btn-clear_c_h, color-mix(in oklab, var(--_btn-clear_c), var(--_btn-mix_c) 10%));
    --btn_c_a: var(--_btn-clear_c_a, color-mix(in oklab, var(--_btn-clear_c), var(--_btn-mix_c) 20%));
    --btn_c_f: var(--_btn-clear_c_f, color-mix(in oklab, var(--_btn-clear_c), var(--_btn-mix_c) 32%));

    --btn_bg_h: var(--btn-type_bg);
    --btn_bg_a: var(--btn-type_bg);
    --btn_bg_f: var(--btn-type_bg);

    --_btn_b: none;
    --_btn_p-i: 0px;
    --_btn_p-b: 0px;
  }

/* === Types === */
.button-primary {
  --btn_c: var(--btn-primary_c, var(--c-white));
  --btn_bg: var(--btn-primary_bg, var(--c-primary-500));
}

.button-secondary {
  --btn_c: var(--btn-secondary_color, var(--c-white));
  --btn_bg: var(--btn-secondary_bg, var(--c-secondary-500));
}

.button-accent {
  --btn_c: var(--btn-accent_color, var(--c-white));
  --btn_bg: var(--btn-accent_bg, var(--c-accent-500));
}

.button-success {
  --btn_c: var(--btn-success_color, var(--c-white));
  --btn_bg: var(--btn-success_bg, var(--c-success-500));
}

.button-warning {
  --btn_c: var(--btn-warning_color, var(--c-white));
  --btn_bg: var(--btn-warning_bg, var(--c-warning-500));
}

.button-danger {
  --btn_c: var(--btn-danger_color, var(--c-white));
  --btn_bg: var(--btn-danger_bg, var(--c-danger-500));
}

.button-info {
  --btn_c: var(--btn-info_color, var(--c-white));
  --btn_bg: var(--btn-info_bg, var(--c-info-500));
}

.button-light {
  --btn_c: var(--btn-light_color, var(--c-dark));
  --btn_bg: var(--btn-light_bg, var(--c-light));
}

.button-dark {
  --btn_c: var(--btn-dark_color, var(--c-light));
  --btn_bg: var(--btn-dark_bg, var(--c-dark));
}

/* === Size === */
.button-sm {
  --_btn_f-s: var(--btn_sm_f-s, 0.875em);
  --_btn_p-b: var(--btn_sm_p-b, 0.25em);
  --_btn_p-i: var(--btn_sm_p-i, 0.5em);
}

.button-lg {
  --_btn_f-s: var(--btn_lg_f-s, 1.25em);
  --_btn_p-b: var(--btn_lg_p-b, 1em);
  --_btn_p-i: var(--btn_lg_p-i, 2em);
}

/* === Radius === */
.button-radius-none {
  --_btn_b-r: var(--btn_b-r_0, 0px);
}

.button-radius-sm {
  --_btn_b-r: var(--btn_b-r_sm, 0.25em);
}

.button-radius-lg {
  --_btn_b-r: var(--btn_b-r_lg, 0.75em);
}

.button-radius-pill {
  --_btn_b-r: var(--btn_b-r_pill, 9999px);
}

/* === Icon === */
[class*="button-icon-"] {
  --_btn_d: inline-flex;

  gap: var(--btn-icon_gap, 0.5em);
  align-items: var(--btn-icon_a-i, center);
  vertical-align: var(--btn-icon_v-a, middle);
}
[class*="button-icon-"] svg {
    max-height: calc(var(--_btn_f-s) * var(--_btn_l-h));
    width: var(--btn-icon_svg_w, auto);
    pointer-events: var(--btn-icon_svg_p-e, none);
  }

.button-icon-only {
  --_btn_p-i: 0px;

  min-width: calc(var(--_btn_f-s) * var(--_btn_l-h) + 2 * (var(--_btn_p-b) + var(--_btn_b-w)));
  aspect-ratio: var(--btn-icon-only_a-r, 1);
  justify-content: var(--btn-icon-only_j-c, center);
}