:root {

  --jc-jet-black:   #2c363f;
  --jc-blush-rose:  #e75a7c;
  --jc-ivory:       #f2f5ea;
  --jc-dust-grey:   #d6dbd2;
  --jc-dry-sage:    #bbc7a4;

  --jc-blush-deep:  #d81f4c;
  --jc-sage-ink:    #58634f;
  --jc-ink-deep:    #1e262d;
  --jc-ink-soft:    #3d4852;
  --jc-line-firm:   #b9c1b2;
  --jc-sage-deep:   #8d9a7c;

  --jc-bg:            var(--jc-ivory);
  --jc-surface:       #ffffff;
  --jc-surface-sunk:  var(--jc-dust-grey);
  --jc-text:          var(--jc-jet-black);
  --jc-text-muted:    var(--jc-sage-ink);
  --jc-accent:        var(--jc-blush-rose);
  --jc-accent-ink:    var(--jc-blush-deep);
  --jc-accent-2:      var(--jc-dry-sage);
  --jc-line:          var(--jc-dust-grey);

  --jc-dark-bg:          var(--jc-jet-black);
  --jc-dark-text:        var(--jc-ivory);
  --jc-dark-text-muted:  var(--jc-dust-grey);
  --jc-dark-accent:      var(--jc-dry-sage);
  --jc-dark-line:        var(--jc-ink-soft);

  --jc-btn-h:            44px;
  --jc-btn-h-sm:         36px;
  --jc-btn-pad-x:        20px;
  --jc-btn-pad-x-sm:     16px;
  --jc-btn-border:       2px;
  --jc-btn-offset:       3px;
  --jc-btn-shadow:       5px;
  --jc-btn-ms:           120ms;

  --jc-btn-accent-bg:     var(--jc-blush-rose);
  --jc-btn-accent-text:   var(--jc-ivory);

  --jc-btn-primary-bg:    var(--jc-jet-black);
  --jc-btn-primary-text:  var(--jc-ivory);

  --jc-btn-ghost-text:    var(--jc-jet-black);

  --jc-font-sans: "Space Grotesk", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --jc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --jc-text-xs:   12px;
  --jc-text-sm:   14px;
  --jc-text-base: 16px;
  --jc-text-lg:   18px;
  --jc-text-xl:   20px;
  --jc-text-2xl:  24px;
  --jc-text-3xl:  30px;
  --jc-text-4xl:  38px;
  --jc-text-5xl:  48px;
  --jc-text-6xl:  56px;

  --jc-leading-tight: 1.05;
  --jc-leading-body:  1.6;
  --jc-tracking-head: -0.03em;
  --jc-tracking-mono: 0.18em;
  --jc-measure:       65ch;

  --jc-radius: 0px;
  --jc-rule:   2px;
  --jc-hair:   1px;

  --jc-space-1:  4px;
  --jc-space-2:  8px;
  --jc-space-3:  12px;
  --jc-space-4:  16px;
  --jc-space-5:  20px;
  --jc-space-6:  24px;
  --jc-space-8:  32px;
  --jc-space-12: 48px;
  --jc-space-16: 64px;
  --jc-space-24: 96px;

  --jc-anchor-offset: 98px;
  --jc-shell:  1180px;
  --jc-gutter: 28px;
}
