:root {
  --struqt-tinte:        #1A1814;
  --struqt-schwarz:      var(--struqt-tinte);
  --struqt-dunkelbraun:  #3D3530;
  --struqt-terra:        #8B6F5E;
  --struqt-stein:        #B8A99A;
  --struqt-warm:         #E4DDD3;
  --struqt-sand:         #F0EBE3;
  --struqt-white:        #FFFFFF;

  --neutral-950: #1A1814;
  --neutral-900: #2A2521;
  --neutral-800: #3D3530;
  --neutral-700: #574c44;
  --neutral-600: #6f6258;
  --neutral-500: #8b7d72;
  --neutral-400: #a89a8d;
  --neutral-300: #b8a99a;
  --neutral-200: #d4cabd;
  --neutral-150: #e4ddd3;
  --neutral-100: #f0ebe3;
  --neutral-50:  #faf8f4;
  --white:       #ffffff;

  --terra-700: #5e4a3c;
  --terra-600: #74594a;
  --terra-500: #8b6f5e;
  --terra-400: #a08573;
  --terra-300: #c0a896;
  --terra-100: #ece2d9;

  --moss:   #6b7355;
  --moss-bg:#eef0e8;
  --ochre:  #b08534;
  --ochre-bg:#f6efe0;
  --brick:  #a8503e;
  --brick-bg:#f5e4df;
  --slate:  #5a6b73;
  --slate-bg:#e8edee;

  --surface-page:    var(--neutral-50);
  --surface-paper:   var(--white);
  --surface-card:    var(--white);
  --surface-sunken:  var(--struqt-sand);
  --surface-warm:    var(--struqt-warm);
  --surface-inverse: var(--struqt-dunkelbraun);

  --text-strong:  var(--struqt-dunkelbraun);
  --text-body:    #4a4039;
  --text-muted:   var(--neutral-500);
  --text-faint:   var(--neutral-400);
  --text-inverse: var(--struqt-sand);
  --text-accent:  var(--terra-600);
  --text-link:    var(--terra-600);

  --border-strong: var(--struqt-dunkelbraun);
  --border-default: #ddd4c8;
  --border-subtle: #ebe4da;
  --border-accent: var(--struqt-terra);

  --accent:        var(--struqt-terra);
  --accent-hover:  var(--terra-600);
  --accent-press:  var(--terra-700);
  --accent-soft:   var(--terra-100);
  --on-accent:     var(--struqt-sand);

  --focus-ring: color-mix(in oklab, var(--struqt-terra) 55%, transparent);
}