@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/karla-latin.woff2") format("woff2");
}

:root {
  --linen-50:  #FFFDF9;
  --linen-100: #F7F2EA;
  --linen-200: #EFE6D8;
  --linen-300: #E2D5C1;
  --linen-500: #8F7E68;
  --ink-900:   #2E2620;
  --ink-600:   #6B5E52;
  --terra-600: #A4492E;
  --terra-700: #8A3A22;
  --terra-100: #F4E1D8;
  --sage-600:  #5E6E55;
  --sage-700:  #4A5843;
  --sage-100:  #E3E8DD;
  --mustard-500: #D6A64F;

  --color-bg:          var(--linen-100);
  --color-bg-alt:      var(--linen-200);
  --color-surface:     var(--linen-50);
  --color-border:      var(--linen-300);
  --color-border-strong: var(--linen-500);
  --color-text:        var(--ink-900);
  --color-text-soft:   var(--ink-600);
  --color-ink:         var(--ink-900);
  --color-on-ink:      var(--linen-100);
  --color-primary:     var(--terra-600);
  --color-primary-hover: var(--terra-700);
  --color-on-primary:  var(--linen-50);
  --color-secondary:   var(--sage-600);
  --color-secondary-hover: var(--sage-700);
  --color-accent:      var(--mustard-500);
  --color-success-bg:  var(--sage-100);
  --color-error:       var(--terra-700);
  --color-error-bg:    var(--terra-100);
  --color-focus:       var(--terra-600);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Karla", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.4rem + 1.6vw, 2.65rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);

  --leading-tight: 1.15;
  --leading-body:  1.65;
  --measure: 65ch;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --gutter: 1rem;
  --container: 72rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(46 38 32 / 0.06), 0 1px 3px rgb(46 38 32 / 0.05);
  --shadow-md: 0 4px 12px rgb(46 38 32 / 0.08), 0 2px 4px rgb(46 38 32 / 0.05);
  --shadow-lg: 0 14px 34px rgb(46 38 32 / 0.12);

  --stitch-color: var(--color-accent);
  --stitch-width: 2px;
  --stitch-dash: 7px;
  --stitch-gap: 5px;

  --texture-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h3v1H0zM3 3h3v1H3z' fill='%232E2620' fill-opacity='.025'/%3E%3Cpath d='M1 3h1v3H1zM4 0h1v3H4z' fill='%232E2620' fill-opacity='.018'/%3E%3C/svg%3E");

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

@media (min-width: 48em) {
  :root { --gutter: 2rem; }
}