/* ==========================================================================
   Territory Lawn and Landscape — design tokens
   Production-ready. Single source of truth for colour, type, and spacing.
   ========================================================================== */

:root {
  /* --- palette (fixed, exact) --------------------------------------- */
  --t-charcoal:  #1F2022;
  --t-olive:     #6B7358;
  --t-stone:     #D8D3C6;
  --t-offwhite:  #F5F3EE;
  --t-orange:    #E06A25;

  /* --- light treatment (default) ------------------------------------ */
  --t-page:        var(--t-offwhite);
  --t-surface:     #FFFFFF;
  --t-surface-2:   var(--t-stone);
  --t-ink:         var(--t-charcoal);
  --t-ink-muted:   rgba(31, 32, 34, .78);
  --t-ink-subtle:  rgba(31, 32, 34, .60);
  --t-rule:        rgba(31, 32, 34, .16);
  --t-rule-strong: rgba(31, 32, 34, .30);
  --t-accent:      var(--t-orange);
  --t-secondary:   var(--t-olive);

  --t-cta-bg:          var(--t-charcoal);
  --t-cta-ink:         var(--t-offwhite);
  --t-cta-bg-hover:    var(--t-olive);
  --t-cta-alt-border:  var(--t-charcoal);
  --t-cta-alt-ink:     var(--t-charcoal);

  /* --- type --------------------------------------------------------- */
  --t-font-display: "Chakra Petch", system-ui, sans-serif;
  --t-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --t-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --t-track-display: .06em;
  --t-track-h1:      .05em;
  --t-track-h3:      .16em;
  --t-track-caps:    .20em;
  --t-track-overline:.24em;
  --t-track-logo:    .27em;

  --t-size-display:  4rem;      /* 64 */
  --t-size-h1:       2.75rem;   /* 44 */
  --t-size-h2:       1.875rem;  /* 30 */
  --t-size-h3:       1.125rem;  /* 18 */
  --t-size-lead:     1.1875rem; /* 19 */
  --t-size-body:     1rem;      /* 16 */
  --t-size-small:    .84375rem; /* 13.5 */
  --t-size-caps:     .6875rem;  /* 11 — never smaller */

  --t-leading-tight: 1.1;
  --t-leading-head:  1.2;
  --t-leading-body:  1.65;
  --t-leading-small: 1.55;

  --t-measure: 56ch;

  /* --- spacing — 8px base ------------------------------------------- */
  --t-1:  4px;
  --t-2:  8px;
  --t-3:  16px;
  --t-4:  24px;
  --t-5:  32px;
  --t-6:  48px;
  --t-7:  64px;
  --t-8:  96px;
  --t-9:  144px;

  --t-gutter:     40px;
  --t-max:        1180px;
  --t-max-prose:  640px;

  /* --- no rounded corners in this system ---------------------------- */
  --t-radius: 0;

  /* --- motion ------------------------------------------------------- */
  --t-dur:   160ms;
  --t-ease:  cubic-bezier(.22, 1, .36, 1);
}

/* --- dark treatment: apply to a section or to the document ---------- */
[data-theme="dark"] {
  --t-page:        var(--t-charcoal);
  --t-surface:     #262829;
  --t-surface-2:   #2E3032;
  --t-ink:         var(--t-offwhite);
  --t-ink-muted:   rgba(245, 243, 238, .80);
  --t-ink-subtle:  rgba(245, 243, 238, .60);
  --t-rule:        rgba(245, 243, 238, .22);
  --t-rule-strong: rgba(245, 243, 238, .40);

  --t-cta-bg:         var(--t-offwhite);
  --t-cta-ink:        var(--t-charcoal);
  --t-cta-bg-hover:   var(--t-stone);
  --t-cta-alt-border: rgba(245, 243, 238, .50);
  --t-cta-alt-ink:    var(--t-offwhite);
}

/* --- self-hosted fonts — no runtime CDN ----------------------------- */
@font-face {
  font-family: "Chakra Petch";
  src: url(/fonts/chakra-petch-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url(/fonts/chakra-petch-500.woff2) format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url(/fonts/chakra-petch-600.woff2) format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url(/fonts/ibm-plex-sans-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url(/fonts/ibm-plex-sans-600.woff2) format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/ibm-plex-mono-500.woff2) format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- base ------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--t-page);
  color: var(--t-ink);
  font-family: var(--t-font-text);
  font-size: var(--t-size-body);
  line-height: var(--t-leading-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--t-olive); text-decoration: none; }
a:hover { color: var(--t-orange); }
::selection { background: var(--t-orange); color: var(--t-offwhite); }

/* --- type roles ------------------------------------------------------ */
.t-display {
  font-family: var(--t-font-display); font-weight: 400;
  font-size: var(--t-size-display); line-height: var(--t-leading-tight);
  letter-spacing: var(--t-track-display);
}
.t-h1 {
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-size-h1); line-height: var(--t-leading-tight);
  letter-spacing: var(--t-track-h1); text-transform: uppercase;
}
.t-h2 {
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-size-h2); line-height: var(--t-leading-head);
  letter-spacing: var(--t-track-h1); text-transform: uppercase;
}
.t-h3 {
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-size-h3); line-height: 1.3;
  letter-spacing: var(--t-track-h3); text-transform: uppercase;
}
.t-overline {
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-size-caps); line-height: var(--t-leading-head);
  letter-spacing: var(--t-track-overline); text-transform: uppercase;
  color: var(--t-olive);
}
.t-lead  { font-size: var(--t-size-lead); line-height: 1.6; }
.t-small { font-size: var(--t-size-small); line-height: var(--t-leading-small); }
.t-num   {
  font-family: var(--t-font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- buttons — square, never orange ---------------------------------- */
.t-btn {
  display: inline-block;
  font-family: var(--t-font-display); font-weight: 500;
  font-size: var(--t-size-caps); letter-spacing: var(--t-track-caps);
  text-transform: uppercase;
  padding: 13px 22px;
  border: 0; border-radius: var(--t-radius);
  background: var(--t-cta-bg); color: var(--t-cta-ink);
  cursor: pointer;
  transition: background var(--t-dur) var(--t-ease);
}
.t-btn:hover { background: var(--t-cta-bg-hover); color: var(--t-cta-ink); }

.t-btn--alt {
  background: transparent;
  color: var(--t-cta-alt-ink);
  border: 1px solid var(--t-cta-alt-border);
  padding: 12px 21px;
  transition: border-color var(--t-dur) var(--t-ease),
              color var(--t-dur) var(--t-ease);
}
.t-btn--alt:hover {
  background: transparent;
  border-color: var(--t-olive); color: var(--t-olive);
}

/* --- boundary motif — ONE instance per surface ----------------------- */
.t-motif {
  background-image:
    repeating-linear-gradient(to right,
      var(--t-rule) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(to bottom,
      var(--t-rule) 0 5px, transparent 5px 10px);
  background-size: 100% 1px, 1px 100%;
  background-position: 0 30px, 30px 0;
  background-repeat: repeat-y, repeat-x;
}
.t-motif--trace  { background-position: 0 40px, 40px 0; }  /* 160 grid  */
.t-motif--detail { background-position: 0 20px, 20px 0; }  /* 80 grid   */

/* --- layout ----------------------------------------------------------- */
.t-wrap   { max-width: var(--t-max); margin-inline: auto; padding-inline: var(--t-gutter); }
.t-prose  { max-width: var(--t-max-prose); }
.t-section{ padding-block: var(--t-8); }

/* --- rules ------------------------------------------------------------
   - Orange: lockup rules, survey crosses, one emphasis mark. Never a
     background, never body text, never a button fill.
   - Olive: sub-line, secondary rules, ONE CTA per view.
   - Radius is 0 everywhere. Square corners are part of the identity.
   - Prices: always GST-inclusive, one number, no asterisks.
   - Registered name string: "Territory Lawn and Landscape".
   --------------------------------------------------------------------- */