/* =========================================================
   LOPE — Colors & Type
   The daily chew that helps your dog keep loping, for life.
   ========================================================= */

/* ---------- Web fonts ---------- */
/* Primary pairing: Fraunces (display) + Inter (body) */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Alternative pairing 2: DM Serif Display + Work Sans */
@font-face {
  font-family: "DM Serif Display";
  src: url("./fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("./fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-Italic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Alternative pairing 3: Bricolage Grotesque + IBM Plex Sans */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/BricolageGrotesque.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/IBMPlexSans.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./fonts/IBMPlexSans-Italic.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* ---------- Brand colors (raw) ---------- */
  --field-green:   #2F5D3A;  /* Primary. Wax-jacket, hedgerow, mown park. */
  --stride-cream:  #F4ECD8;  /* Warm off-white. Replaces clinical white. */
  --golden-hour:   #E8A23A;  /* Late-afternoon light on a long walk. */
  --brick-red:     #B8472E;  /* Country pub door. Used sparingly. */
  --slate-ink:     #1F2A2E;  /* Almost-black, green undertone. Body copy. */
  --sky-wash:      #BCD3D9;  /* Optional. Calm secondary background. */

  /* ---------- Tonal extensions (mixed in oklch) ---------- */
  --field-green-900: oklch(0.30 0.06 145);
  --field-green-700: #244B2E;
  --field-green-600: #2F5D3A;       /* base */
  --field-green-500: #3E7349;
  --field-green-300: #7CA487;
  --field-green-100: #D8E3D9;

  --cream-100:  #FBF7EC;
  --cream-200:  #F4ECD8;            /* base */
  --cream-300:  #ECE0C2;
  --cream-400:  #DDCFA8;

  --golden-700: #B8801F;
  --golden-600: #D08F2C;
  --golden-500: #E8A23A;            /* base */
  --golden-300: #F2C77E;
  --golden-100: #FAEACB;

  --brick-700:  #8E3622;
  --brick-600:  #B8472E;            /* base */
  --brick-500:  #C9573E;
  --brick-300:  #E29A88;

  --ink-900:    #14191B;
  --ink-700:    #1F2A2E;            /* base */
  --ink-500:    #45565B;
  --ink-300:    #7E8C90;
  --ink-100:    #C8CFD1;

  /* ---------- Semantic surfaces ---------- */
  --bg:            var(--cream-200);   /* default page surface */
  --bg-soft:       var(--cream-100);   /* lifted card on cream */
  --bg-deep:       var(--field-green-700); /* hero / dark surfaces */
  --bg-sky:        var(--sky-wash);    /* digital tile / email header */

  --surface:           #FFFCF4;        /* lightest cream-tinted card */
  --surface-muted:     var(--cream-300);
  --surface-inverse:   var(--field-green-700);

  /* ---------- Foreground (text/icon) ---------- */
  --fg:            var(--ink-700);     /* primary body */
  --fg-soft:       var(--ink-500);     /* secondary body */
  --fg-muted:      var(--ink-300);     /* captions, meta */
  --fg-on-dark:    var(--cream-200);   /* text on field-green */
  --fg-on-accent:  var(--cream-100);   /* text on brick-red CTA */
  --fg-brand:      var(--field-green-700);
  --fg-accent:     var(--brick-600);
  --fg-warm:       var(--golden-700);

  /* ---------- Borders / rules ---------- */
  --rule:          color-mix(in oklab, var(--ink-700) 14%, transparent);
  --rule-strong:   color-mix(in oklab, var(--ink-700) 28%, transparent);
  --rule-on-dark:  color-mix(in oklab, var(--cream-200) 22%, transparent);

  /* ---------- Status (used sparingly; brand-tinted) ---------- */
  --positive:      var(--field-green-600);
  --warning:       var(--golden-600);
  --critical:      var(--brick-600);
  --info:          var(--sky-wash);

  /* ---------- Type families ---------- */
  --font-display:  "Fraunces", "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --font-body:     "Inter", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Optical / variable axes for Fraunces */
  --fraunces-soft: 100;   /* dial up softness on hero copy */
  --fraunces-wonk: 0;
  --fraunces-opsz: 144;

  /* ---------- Type scale (clamp for fluidity) ---------- */
  --fs-display-xl: clamp(56px, 7.4vw, 112px);   /* hero wordmark / posters */
  --fs-display-l:  clamp(44px, 5.6vw, 80px);    /* big editorial heads */
  --fs-display-m:  clamp(36px, 4.2vw, 56px);    /* h1 */
  --fs-h2:         clamp(28px, 3.0vw, 40px);
  --fs-h3:         clamp(22px, 2.2vw, 28px);
  --fs-h4:         18px;
  --fs-eyebrow:    13px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;

  /* ---------- Line height ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* ---------- Letter spacing ---------- */
  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-eyebrow: 0.14em;     /* small caps eyebrows */

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, warm-tinted, never blue) ---------- */
  --shadow-1: 0 1px 2px rgba(31, 42, 46, 0.06),
              0 1px 1px rgba(31, 42, 46, 0.04);
  --shadow-2: 0 6px 14px rgba(31, 42, 46, 0.08),
              0 2px 4px rgba(31, 42, 46, 0.05);
  --shadow-3: 0 18px 40px rgba(31, 42, 46, 0.12),
              0 6px 12px rgba(31, 42, 46, 0.06);
  --shadow-press: inset 0 1px 0 rgba(31, 42, 46, 0.08);

  /* ---------- Motion ---------- */
  --ease-stride: cubic-bezier(0.22, 0.61, 0.36, 1); /* long, easy, no overshoot */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --dur-quick:   140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --container:    1200px;
  --container-narrow: 760px;
  --gutter:       clamp(16px, 3vw, 32px);
}

/* =========================================================
   SEMANTIC ELEMENTS
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--golden-300);
  color: var(--ink-900);
}

/* Display / headings */
h1, .h1, .display-m {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-m);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-variation-settings: "SOFT" var(--fraunces-soft), "opsz" var(--fraunces-opsz);
  color: var(--fg-brand);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xl);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--fg-brand);
  text-wrap: balance;
}
.display-l {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--fg-brand);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--fg-brand);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-brand);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--tr-tight);
  margin: 0 0 var(--space-2);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.body-l {
  font-size: var(--fs-body-l);
  line-height: 1.55;
}
.body-s, small {
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft);
}
.caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Eyebrow / over-line — small, tracked-out, uppercase */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-warm);
}

/* Editorial italic — Fraunces with the wonk axis on for personality */
.editorial-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--fg-brand);
}

/* Links */
a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-stride);
}
a:hover { color: var(--brick-700); }

/* Code */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cream-300);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-700);
}

/* Horizontal rule — a stride line, not a hairline. */
hr, .stride-rule {
  border: 0;
  height: 2px;
  background: linear-gradient(to right,
    var(--ink-700) 0%, var(--ink-700) 70%,
    transparent 100%);
  margin: var(--space-6) 0;
  opacity: 0.85;
}