/* ==========================================================================
   tokens.css — PROPERTY-SPECIFIC design tokens (Turtle Creek Kokomo)
   This is the only stylesheet a sister property changes. site.css references
   these names and never a literal colour.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/BricolageGrotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand: the dark green from the original theme, the olive and brown from the logo */
  --brand: #20503f;
  --brand-deep: #163a2d;
  --brand-soft: #e4eee8;
  --brand-olive: #7d7a2b;
  --brand-olive-soft: #f0f0dc;
  --brand-brown: #5a4632;

  /* Surfaces and text */
  --bg: #ffffff;
  --bg-alt: #f4f5f1;
  --ink: #1b211e;
  --ink-muted: #59635d;
  --line: #dde2dd;
  --on-brand: #ffffff;
  --on-brand-muted: #cfe0d6;

  /* Header */
  --header-bg: rgba(255, 255, 255, 0.94);
  --header-fg: var(--ink);
  --header-height: 4.5rem;

  /* Type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape, depth, motion */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 14px 34px -16px rgba(27, 33, 30, 0.28);
  --shadow-lift: 0 22px 44px -18px rgba(27, 33, 30, 0.35);
  --focus: 3px solid #1b5fd1;
  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Property-specific media */
  --logo-height: 2.75rem;
}