/* Square Deal Studio's look, every value in one place: limestone ground, ink, one deep green.
   Type: Hanken Grotesk (Aktiv Grotesk feel) for headings and text, Michroma (Eurostile feel) for names,
   JetBrains Mono for labels. Real Aktiv Grotesk and Eurostile live on Adobe Fonts: once there's a web
   project, swap --f-head, --f-body and --f-name below and add its stylesheet link to each page.
   No logo for now: the name set in type is the wordmark (.mark in base.css). */

:root {
  --bg: #eeefe9;
  --bg-2: #eeefe9;
  --surface: #f8f8f4;
  --surface-2: #e4e6de;
  --ink: #18212b;
  --muted: #414a55;
  --line: #c6cbc0;
  --accent: #2f6b4f;
  --accent-hover: #22513b;
  --on-accent: #ffffff;
  --accent-soft: #dce8df;
  --accent-text: #2f6b4f;
  --live: #2f6b4f;
  --live-soft: #dce8df;
  --wait: #7a5a12;
  --wait-soft: #efe6cc;
  --ph: #dfe1d8;
  --ph-2: #c9ccc1;
  --ph-ink: #5f665f;

  --f-head: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-sub: var(--f-body);
  --f-name: "Michroma", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-label: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --hero-weight: 200;
  --head-weight: 300;
  --head-stretch: 100%;
  --head-tracking: -0.03em;
  --head-leading: 1.05;
  --name-tracking: -0.02em;
  --h1-size: clamp(2.5rem, 6.2vw, 5.4rem);
  --h2-size: clamp(2rem, 4vw, 3rem);
  --sub-weight: 700;
  --sub-stretch: 100%;
  --sub-tracking: 0;
  --body-size: 1.0625rem;
  --body-leading: 1.6;
  --label-size: 0.85rem;
  --label-tracking: 0;
  --label-transform: none;
  --btn-font: var(--f-body);
  --btn-weight: 600;
  --btn-tracking: 0;
  --btn-transform: none;

  --radius: 3px;
  --radius-lg: 4px;
  --lift: 0 0 0 transparent;
  --hero-wash: var(--bg);
}

/* The one dark band on a marketing page: the free tool. */
.band {
  --ink: #eaede5;
  --muted: #b3bfb4;
  --line: #34473b;
  --surface: #1d3127;
  --surface-2: #263c30;
  --accent: #e9efe6;
  --accent-hover: #ffffff;
  --on-accent: #16261e;
  --accent-soft: #2a4436;
  --accent-text: #cfe3d3;
  --live: #a8d5b8;
  background: #16261e;
  color: var(--ink);
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}