/* ==========================================================================
   TERRAVANA — DESIGN TOKENS
   --------------------------------------------------------------------------
   The single source of truth for every colour, type step, space, radius,
   shadow and duration on the site.

   THE RULE: no section file, template, or component may declare a literal
   hex value, font stack, or magic pixel measurement. If a value is needed
   and it is not here, it gets added here first.

   Palette source: Terravana Landscape LLC Brand Guideline, pp. 6–7.
   Type scale source: the same guideline, p. 4 (Font Hierarchy).

   ACCENT — Warm Gold #C6A166, as the guideline specifies.

   An earlier note here claimed the approved logo used a copper swoosh, and on
   that basis copper #A85F2C was made the site accent. That was written against
   an earlier logo file and is no longer true. The supplied logo.png is built
   from exactly two colours — Forest Green #30462C (7,645px) and Warm Gold
   #C6A166 (4,316px), both an exact match to the palette — and contains no
   copper at all. The copper ramp was retired on 2026-08-27.

   Gold is a light colour: 2.16:1 on ivory, which is below every legibility
   floor. It carries fills, rules, dots and marks, and must never be used for
   text or for an icon a visitor has to read. Anything in the gold family that
   has to be legible on a light ground uses --tv-gold-deep instead.
   ========================================================================== */

:root {

  /* --- Brand palette · primary -------------------------------------- */
  --tv-forest:            #30462C;  /* Primary. Headings, dark bands, footer. */
  --tv-forest-deep:       #22331F;  /* Deeper forest for gradients + overlays. */
  --tv-charcoal-green:    #4E5E45;  /* Secondary dark. */
  --tv-ivory:             #F6F2EA;  /* Page ground. */
  --tv-white:             #FFFFFF;

  /* --- Brand palette · accent ----------------------------------------
     Warm Gold straight from the guideline, plus the two derived steps the
     palette needs in order to stay readable. Both derivations hold the brand
     hue and only move lightness. */
  --tv-gold:              #C6A166;  /* THE accent. Fills, rules, marks. NEVER text. */
  --tv-gold-deep:         #7A5A28;  /* 5.7:1 on ivory — links, small text, icons. */
  --tv-gold-light:        #DFC08A;  /* 5.9:1 on forest — accents on dark grounds. */
  --tv-gold-wash:         rgba(198, 161, 102, 0.14);

  /* --- Brand palette · secondary ------------------------------------- */
  --tv-sage:              #8A9773;  /* DECORATIVE ONLY — 2.8:1, never text. */
  --tv-olive-mist:        #B9C1A9;
  --tv-sand:              #E7DFD2;  /* Alternating band ground. */
  /* Warm Gold lives in the accent block above — it is the accent now, not a
     tertiary hairline colour. */

  /* --- Semantic · text on light grounds ------------------------------ */
  --tv-heading:           #30462C;  /* 9.3:1 on ivory — AAA. */
  --tv-text:              #45543D;  /* 7.2:1 on ivory — AAA. */
  --tv-muted:             #5D6B55;  /* 5.1:1 on ivory — AA. Floor for small text. */
  --tv-link:              var(--tv-gold-deep);   /* 5.7:1 on ivory. */
  /* Hover darkens toward the primary rather than lightening: the lighter gold
     would drop a link below the contrast floor exactly when it is being
     pointed at. */
  --tv-link-hover:        var(--tv-forest);      /* 9.3:1 on ivory. */

  /* Form placeholders. Sage, at ~2.8:1 on a white field, sits under the 4.5:1
     floor the tokens above hold to. That is a deliberate call, not an
     oversight: every field in .tv-form carries a real <label>, so the
     placeholder is an example of the expected answer rather than the field's
     name, and nothing is lost if it is hard to read. Do not reuse it for
     anything a visitor has to be able to read.

     Was #9AA688, which was off-palette and failed the brand-colour check. */
  --tv-placeholder:       var(--tv-sage);

  /* --- Semantic · text on dark (forest) grounds ---------------------- */
  --tv-on-dark:           #F6F2EA;  /* 10.4:1 on forest — AAA. */
  --tv-on-dark-muted:     #C4CDB6;  /* 6.1:1 on forest — AA. */
  --tv-on-dark-accent:    var(--tv-gold-light);  /* 5.9:1 on forest. */

  /* --- Semantic · surfaces ------------------------------------------- */
  --tv-bg:                var(--tv-ivory);
  --tv-bg-alt:            var(--tv-sand);
  --tv-surface:           var(--tv-white);
  --tv-surface-sunken:    #EFEADF;

  /* --- Semantic · lines ---------------------------------------------- */
  --tv-rule:              rgba(48, 70, 44, 0.14);
  --tv-rule-soft:         rgba(48, 70, 44, 0.08);
  --tv-rule-gold:         rgba(198, 161, 102, 0.45);
  --tv-rule-on-dark:      rgba(246, 242, 234, 0.18);

  /* --- Semantic · image scrims ----------------------------------------
     Every overlay on photography is forest-deep at a set opacity, never
     neutral black. Black flattens the greens; the tinted scrim keeps them. */
  --tv-scrim-94:          rgba(34, 51, 31, 0.94);
  --tv-scrim-90:          rgba(34, 51, 31, 0.90);
  --tv-scrim-75:          rgba(34, 51, 31, 0.75);
  --tv-scrim-55:          rgba(34, 51, 31, 0.55);
  --tv-scrim-30:          rgba(34, 51, 31, 0.30);
  --tv-scrim-0:           rgba(34, 51, 31, 0);

  /* --- Semantic · ivory veils, for dark TEXT over photography -----------
     The brand mockup sets the hero headline in forest green over a misty,
     light image rather than in white over a dark scrim. These veil the
     photograph up toward ivory so heading text keeps its 9.3:1 contrast. */
  --tv-veil-96:           rgba(246, 242, 234, 0.96);
  --tv-veil-88:           rgba(246, 242, 234, 0.88);
  --tv-veil-82:           rgba(246, 242, 234, 0.82);
  --tv-veil-66:           rgba(246, 242, 234, 0.66);
  --tv-veil-40:           rgba(246, 242, 234, 0.40);
  --tv-veil-28:           rgba(246, 242, 234, 0.28);
  --tv-veil-0:            rgba(246, 242, 234, 0);

  /* --- Semantic · ivory at partial alpha, for use on dark grounds -------
     Borders, form fields and inactive dots sitting on forest green. These
     exist so no component has to hand-write an rgba() literal. */
  --tv-on-dark-border:    rgba(246, 242, 234, 0.50);
  --tv-on-dark-dot:       rgba(246, 242, 234, 0.32);
  --tv-on-dark-field:     rgba(246, 242, 234, 0.10);

  /* Sage bloom used behind dark bands so they are not flat rectangles. */
  --tv-glow-sage:         rgba(138, 151, 115, 0.20);
  --tv-glow-sage-strong:  rgba(138, 151, 115, 0.22);

  /* --- Semantic · states --------------------------------------------- */
  --tv-focus:             var(--tv-gold-deep);
  --tv-error:             #A3372B;
  --tv-success:           #3D6B3A;

  /* --- Typography · families ----------------------------------------- */
  /* Poppins, not the serif. The site is set in one family end to end; this
     token is kept as a separate name because every heading, numeral and
     display line references it, and a future change of display face should
     stay a one-line edit rather than a search across forty files. */
  --tv-font-display:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --tv-font-body:         "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  /* --- Typography · scale --------------------------------------------
     The guideline's Font Hierarchy (p. 4) reads
       H1 56 · H2 34 · H3 26 · Body 16 · Caption 12.

     Those are design-tool points and map 1:1 to CSS pixels. An earlier version
     of this file read them as print points and converted at 1.333x, which is
     why every step on the site ran a third larger than the deck. The clamp
     maximums below land exactly on the guideline at desktop width and scale
     down from there, so a 56px headline does not overwhelm a phone.

     Body and caption are fixed rather than fluid: the deck gives one size for
     each, and there is no reason for running text to move with the viewport.

     The deck's five steps, plus two the deck does not define but a working
     page needs — --tv-fs-h4 and --tv-fs-lead, both marked below. --tv-fs-sm
     was a third, and was genuinely redundant: it is now the same 16px as body.

     Ladder at desktop:
       34 headline · 26 sub-head · 22 card · 18 lead · 16 body · 12 caption  */
  --tv-fs-display:        clamp(2.5rem, 5.2vw, 3.5rem);     /* 40 → 56 */
  --tv-fs-h1:             clamp(2.25rem, 4.4vw, 3.5rem);    /* 36 → 56 */
  --tv-fs-h2:             clamp(1.625rem, 2.8vw, 2.125rem); /* 26 → 34 */
  --tv-fs-h3:             clamp(1.25rem, 2.1vw, 1.625rem);  /* 20 → 26 */

  /*
   * NOT IN THE DECK (1 of 2) — the card / sub-item title step.
   *
   * This was briefly retired on the reasoning that the deck defines only five
   * steps, and card titles were folded up into H3. That was the wrong fix. The
   * real defect was that the same role took h3 in three sections and h4 in five
   * — inconsistent *use*, not the step's existence. Folding them into H3 put 18
   * elements on the home page at 26px, where card titles wrapped mid-phrase and
   * sat only 1.31x below the section headlines they belong under.
   *
   * One token, one role: every card title, step title and accordion trigger.
   */
  --tv-fs-h4:             clamp(1.25rem, 1.6vw, 1.375rem);  /* 20 → 22 */

  /* NOT IN THE DECK (2 of 2) — an intro paragraph needs one stop above body. */
  --tv-fs-lead:           1.125rem;                         /* 18 */

  --tv-fs-body:           1rem;                             /* 16 */
  --tv-fs-caption:        0.75rem;                          /* 12 */
  --tv-fs-eyebrow:        0.75rem;                          /* 12 */

  /* --- Typography · weights ------------------------------------------
     The guideline names Regular, Medium and SemiBold, and those are exactly
     the three Poppins files the theme ships. A --tv-fw-light: 300 step used to
     sit here with no font file behind it, so every use of it was silently
     rendered at 400 or synthesised by the browser. Removed rather than left
     standing as a declaration the fonts cannot honour. */
  --tv-fw-regular:        400;
  --tv-fw-medium:         500;
  --tv-fw-semibold:       600;
  --tv-fw-display:        600;
  --tv-fw-display-bold:   700;

  /* --- Typography · rhythm ------------------------------------------- */
  --tv-lh-display:        1.05;
  --tv-lh-heading:        1.2;
  --tv-lh-snug:           1.4;
  --tv-lh-body:           1.75;
  --tv-ls-display:        -0.015em;
  --tv-ls-heading:        -0.005em;
  --tv-ls-eyebrow:        0.18em;
  --tv-ls-button:         0.12em;

  /* --- Measure -------------------------------------------------------- */
  --tv-measure:           68ch;
  --tv-measure-narrow:    54ch;

  /* --- Space · 8px base ---------------------------------------------- */
  --tv-space-1:   0.25rem;  /*   4 */
  --tv-space-2:   0.5rem;   /*   8 */
  --tv-space-3:   0.75rem;  /*  12 */
  --tv-space-4:   1rem;     /*  16 */
  --tv-space-5:   1.5rem;   /*  24 */
  --tv-space-6:   2rem;     /*  32 */
  --tv-space-7:   3rem;     /*  48 */
  --tv-space-8:   4rem;     /*  64 */
  --tv-space-9:   5rem;     /*  80 */
  --tv-space-10:  6rem;     /*  96 */
  --tv-space-11:  7.5rem;   /* 120 */
  --tv-space-12:  10rem;    /* 160 */

  /* --- Layout --------------------------------------------------------- */
  --tv-container:         1240px;
  /* Header and hero run wider than the body sections so the logo and the
     headline sit near the edge of the frame, as the brand mockup does.
     A 1240px box on a 1900px screen leaves a 330px margin — far more inset
     than the deck shows. */
  /* Centred box, so every 100px added moves each edge outward by 50px.
     1560 -> 1600 -> 1660 -> 1760 has walked the logo and hero headline 100px
     left in total, keeping the two aligned with one another throughout.

     This is close to the practical limit of widening: past roughly 1760 the
     nav's right-hand end starts crowding the opposite edge on a 1900px screen.
     If more is wanted, switch .tv-header__inner and .tv-hero__inner to
     max-width: none with an explicit padding-inline instead. */
  --tv-container-wide:    1760px;
  --tv-container-narrow:  920px;
  --tv-gutter:            clamp(1.25rem, 3vw, 1.5rem);      /* 20 → 24 */
  --tv-section-y:         clamp(4rem, 8vw, 7.5rem);         /* 64 → 120 */
  --tv-section-y-tight:   clamp(3rem, 5vw, 4.5rem);         /* 48 → 72 */
  --tv-grid-gap:          var(--tv-space-5);
  --tv-card-pad:          var(--tv-space-6);
  --tv-header-h:          104px;
  --tv-header-h-scrolled: 82px;

  /* --- Radii ---------------------------------------------------------- */
  --tv-radius-xs:         4px;
  --tv-radius-sm:         6px;
  --tv-radius-md:         14px;
  --tv-radius-lg:         20px;
  --tv-radius-xl:         28px;
  --tv-radius-pill:       999px;
  --tv-radius-image:      var(--tv-radius-lg);
  /* Top-arch treatment for feature and card imagery — the organic shape
     that keeps the brand from reading as a generic rounded-card template. */
  --tv-radius-arch:       999px 999px var(--tv-radius-lg) var(--tv-radius-lg);

  /* --- Shadows · green-tinted, never neutral grey --------------------- */
  --tv-shadow-xs:         0 1px 2px rgba(48, 70, 44, 0.05);
  --tv-shadow-sm:         0 2px 8px rgba(48, 70, 44, 0.06);
  --tv-shadow-md:         0 12px 32px rgba(48, 70, 44, 0.10);
  --tv-shadow-lg:         0 24px 60px rgba(48, 70, 44, 0.14);
  --tv-shadow-header:     0 1px 0 rgba(48, 70, 44, 0.08), 0 8px 28px rgba(48, 70, 44, 0.07);

  /* --- Motion --------------------------------------------------------- */
  --tv-ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
  --tv-ease-in-out:       cubic-bezier(0.65, 0.05, 0.36, 1);
  --tv-dur-fast:          180ms;
  --tv-dur-base:          280ms;
  --tv-dur-slow:          520ms;
  --tv-reveal-shift:      24px;

  /* --- Z-index ladder -------------------------------------------------- */
  --tv-z-base:            1;
  --tv-z-sticky:          100;
  --tv-z-header:          200;
  --tv-z-drawer:          300;
  --tv-z-overlay:         400;
  --tv-z-toast:           500;
}

/* Section-level ground helpers. Every section picks exactly one of these,
   which is what keeps the ivory / sand / forest alternation consistent
   across ~70 independently authored section files. */
.tv-ground--ivory  { background-color: var(--tv-ivory); color: var(--tv-text); }
.tv-ground--sand   { background-color: var(--tv-sand);  color: var(--tv-text); }
.tv-ground--white  { background-color: var(--tv-white); color: var(--tv-text); }
.tv-ground--forest { background-color: var(--tv-forest); color: var(--tv-on-dark); }

.tv-ground--forest :is(h1, h2, h3, h4, h5, h6) { color: var(--tv-on-dark); }
.tv-ground--forest .tv-eyebrow                 { color: var(--tv-on-dark-accent); }
/* .tv-lead is --tv-muted, a dark green that lands at 1.8:1 on forest. Every
   dark band needs this, so it belongs here rather than being restated by each
   section that happens to have a lead. */
.tv-ground--forest .tv-lead                    { color: var(--tv-on-dark-muted); }