@import url('https://use.typekit.net/nih2shd.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&family=Special+Elite&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --swamp-900: #1d2410;
  --swamp-800: #2a3318;
  --swamp-700: #3a4622;
  --swamp-600: #4a5a2d;
  --swamp-500: #5a6a36;
  --swamp-400: #6e7d44;
  --swamp-300: #8a9658;
  --swamp-200: #b0b783;

  --rust-900: #4a1d14;
  --rust-800: #6f2a20;
  --rust-700: #8c3a2c;
  --rust-600: #a14635;
  --rust-500: #b35640;
  --rust-300: #d28a72;

  --sand-500: #a08050;
  --sand-400: #b89668;
  --sand-300: #c9a677;
  --sand-200: #d9bf8b;
  --sand-100: #e8d5a8;
  --sand-50:  #f3e6c4;

  --bone-100: #f0e6cc;
  --bone-50:  #f7efd7;

  --ink-900: #1a1208;
  --ink-800: #2a1d10;
  --ink-700: #3a2818;
  --ink-600: #4a3520;

  --ice-700: #4a6878;
  --ice-500: #7a96a3;
  --ice-300: #b8cdd6;

  --bg-page:     var(--bone-100);
  --bg-paper:    var(--sand-50);
  --bg-elevated: var(--bone-50);
  --bg-deep:     var(--swamp-800);
  --bg-deepest:  var(--swamp-900);

  --fg-1:     var(--ink-900);
  --fg-2:     var(--ink-700);
  --fg-3:     var(--ink-600);
  --fg-muted: var(--swamp-400);

  --fg-on-dark-1: var(--sand-50);
  --fg-on-dark-2: var(--sand-200);
  --fg-on-dark-3: var(--swamp-300);

  --action:       var(--rust-700);
  --action-hover: var(--rust-600);
  --action-press: var(--rust-800);
  --action-fg:    var(--sand-50);

  --primary:       var(--swamp-700);
  --primary-hover: var(--swamp-600);
  --primary-press: var(--swamp-800);
  --primary-fg:    var(--sand-50);

  --stroke-1:       var(--ink-800);
  --stroke-2:       color-mix(in oklab, var(--ink-800) 60%, transparent);
  --stroke-soft:    color-mix(in oklab, var(--ink-800) 18%, transparent);
  --stroke-on-dark: color-mix(in oklab, var(--sand-200) 25%, transparent);

  --success: var(--swamp-600);
  --warning: #c98a2e;
  --danger:  var(--rust-700);
  --info:    var(--ice-700);

  --font-display:   'capellina-bold-caps', 'Alfa Slab One', Georgia, serif;
  --font-heading:   'Oswald', 'Anton', 'Impact', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Oswald', sans-serif;
  --font-body:      'Barlow', 'Helvetica Neue', system-ui, sans-serif;
  --font-stamp:     'Special Elite', 'Courier New', monospace;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(72px, 10vw, 144px);
  --fs-display:    clamp(56px, 7vw, 96px);
  --fs-h1:         clamp(40px, 5vw, 64px);
  --fs-h2:         clamp(28px, 3.5vw, 44px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-eyebrow:    13px;
  --fs-tiny:       11px;

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

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --ls-display: -0.01em;
  --ls-heading:  0;
  --ls-eyebrow:  0.14em;
  --ls-banner:   0.06em;

  --s-0: 0;    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --r-xs: 2px;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px; --r-xl: 14px;
  --r-banner: 4px 4px 18px 18px;
  --r-shield: 18px 18px 24px 24px / 22px 22px 14px 14px;

  --shadow-stamp:    2px 3px 0 var(--ink-800);
  --shadow-stamp-lg: 4px 5px 0 var(--ink-800);
  --shadow-card:     0 4px 0 -1px var(--ink-800), 0 6px 14px -4px rgba(26,18,8,.35);
  --shadow-card-lg:  0 6px 0 -1px var(--ink-800), 0 14px 30px -6px rgba(26,18,8,.4);
  --shadow-inset:    inset 0 0 0 2px var(--ink-800);

  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --ease-thwack: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 360ms;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}