/* MARAS & PARTNERS - design tokens
   Institutional system: warm stone paper, graphite ink, deep charcoal panels,
   crimson accents, sharp corners. Besley (display) + Heebo (body). */
:root {
  /* Surfaces */
  --color-stone: #f4f3ef;        /* page background */
  --color-card: #fcfbf8;         /* raised cards */
  --color-char: #191b20;         /* dark sections */
  --color-char-2: #121419;       /* footer */
  --color-card-d: #20232a;       /* cards on dark */

  /* Ink */
  --color-ink: #212429;          /* text on light */
  --color-muted: #686c74;        /* secondary on light */
  --color-paper: #eeede8;        /* text on dark */
  --color-muted-d: #9a9fa8;      /* secondary on dark */

  /* Accent */
  --color-crimson: #a31c31;      /* deep crimson */
  --color-crimson-deep: #82142a; /* hover */
  --color-crimson-soft: #c96173; /* on dark, lines and small text */

  /* Lines */
  --color-line: #dcdbd2;
  --color-line-d: rgba(238, 237, 232, .15);

  /* Type */
  --font-display: "Besley", "Georgia", serif;
  --font-body: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-200: .8125rem;
  --fs-300: .9075rem;
  --fs-400: 1rem;
  --fs-500: 1.145rem;
  --fs-600: clamp(1.3rem, 1.12rem + .55vw, 1.65rem);
  --fs-700: clamp(1.7rem, 1.38rem + 1.15vw, 2.4rem);
  --fs-800: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem);
  --fs-hero: clamp(2.6rem, 1.7rem + 3.4vw, 4.7rem);
  --fs-deal: clamp(2rem, 1.4rem + 2.2vw, 3.3rem);

  /* Space */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 2.75rem; --s8: 3.5rem; --s9: 4.5rem; --s10: 6rem;

  /* Shape: sharp, institutional */
  --radius-xs: 0px;
  --radius-sm: 2px;

  --container: 76rem;
  --header-h: 4.4rem;
  --utility-h: 2.2rem;
}

/* Wide screens (added 2026-07-13): let content breathe on 27"+ displays.
   Container grows and the percentage root scales type + spacing together
   while respecting user font-size preferences. Nothing below 1600px changes. */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2000px) {
  :root { --container: 1560px; }
  html { font-size: 112.5%; }
}