/* ══ Tree Removal Marketing — design tokens ══
   Source: Claude Design export, Aug 2026. Do not edit values here;
   change them in the design system and re-export. */

:root {
  --bark:            #191D18;
  --bark-deep:       #101309;
  --bark-raised:     #1D221B;
  --bark-inset:      #161C14;
  --bark-well:       #0C0F07;
  --sawdust:         #F2EDE1;
  --cut-wood:        #E2D9C4;
  --safety-orange:   #FF6A13;
  --safety-orange-lift:  #FF7A2B;
  --safety-orange-hover: #FF8A44;
  --lichen-green:    #7C8C6A;
  --rust:            #C9762F;
  --lichen-grey:     #93997F;

  --ash-1: #C6CBBB; --ash-2: #B7BEA9; --ash-3: #A9B09C; --ash-4: #5F665A;
  --ash-5: #4F5649; --ash-6: #333A2E; --ash-7: #2C3327;

  --surface-page:     var(--bark);
  --surface-card:     var(--bark);
  --surface-recessed: var(--bark-deep);
  --surface-inset:    var(--bark-deep);
  --surface-tile:     var(--bark-inset);
  --surface-avatar:   var(--ash-7);

  --text-primary:   var(--sawdust);
  --text-secondary: var(--cut-wood);
  --text-body:      var(--ash-2);
  --text-ui:        var(--ash-1);
  --text-muted:     var(--lichen-grey);
  --text-faint:     var(--ash-4);
  --text-dim:       var(--ash-5);

  --accent:       var(--safety-orange);
  --accent-hover: var(--safety-orange-hover);
  --accent-on:    var(--bark-deep);
  --accent-wash:  rgba(255, 106, 19, 0.13);
  --accent-line:  rgba(255, 106, 19, 0.34);
  --accent-line-strong: rgba(255, 106, 19, 0.5);

  --series-1: var(--safety-orange);
  --series-2: var(--rust);
  --series-3: var(--lichen-green);
  --series-inactive: var(--ash-6);

  --hairline:        rgba(242, 237, 225, 0.09);
  --hairline-soft:   rgba(242, 237, 225, 0.07);
  --hairline-strong: rgba(242, 237, 225, 0.14);
  --hairline-card:   rgba(242, 237, 225, 0.1);

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --size-10: 10px; --size-12: 12.5px; --size-16: 16px; --size-20: 20px;
  --size-26: 26px; --size-33: 33px; --size-42: 42px; --size-53: 53px; --size-68: 68px;

  --display-hero:    clamp(34px, 5.6vw, 60px);
  --display-section: clamp(26px, 4.4vw, 42px);
  --display-quote:   clamp(20px, 3.4vw, 33px);
  --display-numeral: clamp(42px, 6.5vw, 68px);
  --display-plate:   clamp(20px, 2.6vw, 33px);

  --weight-body: 400; --weight-medium: 500; --weight-strong: 600;

  --leading-display: 1.06; --leading-tight: 1.1; --leading-quote: 1.35;
  --leading-ui: 1.45; --leading-body: 1.618;

  --tracking-display: -0.022em; --tracking-hero: -0.025em;
  --tracking-mono: 0.11em; --tracking-mono-wide: 0.13em; --tracking-caps: 0.07em;

  --measure-body: 60ch; --measure-lead: 52ch; --measure-quote: 22ch;

  --space-2xs: 6px; --space-xs: 10px; --space-s: 14px; --space-m: 18px;
  --space-l: 24px; --space-xl: 32px; --space-2xl: 44px; --space-3xl: 72px; --space-4xl: 104px;

  --section-y: clamp(64px, 9vw, 128px);
  --section-y-tight: clamp(48px, 5.5vw, 72px);
  --gutter: clamp(20px, 5vw, 40px);
  --column-gap: clamp(52px, 6vw, 104px);
  --page-max: 1240px;
  --page-max-wide: 1360px;

  --radius-s: 6px; --radius-m: 8px; --radius-l: 12px; --radius-xl: 14px;
  --radius-2xl: 16px; --radius-pill: 999px; --radius-phone: 44px;

  --tap-min: 44px; --nav-h: 66px; --anchor-offset: 88px;

  --lift-sm: inset 0 1px 0 rgba(242,237,225,.045), 0 10px 22px -16px rgba(0,0,0,.7);
  --lift:    inset 0 1px 0 rgba(242,237,225,.055), 0 20px 40px -24px rgba(0,0,0,.8);
  --lift-lg: inset 0 1px 0 rgba(242,237,225,.05), 0 30px 60px -32px rgba(0,0,0,.85);
  --lift-float: 0 40px 90px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(242,237,225,.05);
  --lift-button: inset 0 1px 0 rgba(255,255,255,.26), 0 14px 28px -14px rgba(255,106,19,.5);
  --lift-nav: 0 14px 34px rgba(0,0,0,.42);

  --grad-card: linear-gradient(180deg, #1d221b 0%, #191d18 64%);
  --grad-deep: linear-gradient(180deg, #151a12 0%, #101309 58%);
  --grad-band: linear-gradient(180deg, #0c0f07 0%, #101309 14%, #101309 86%, #0c0f07 100%);
  --grad-hero: radial-gradient(120% 90% at 78% -10%, #23301e 0%, #1b2019 46%, #191d18 78%);
  --grad-results: radial-gradient(90% 130% at 50% 0%, #20261d 0%, #1a1e19 48%, #191d18 100%);
  --grad-accent-button: linear-gradient(180deg, #ff7a2b, #ff6a13);
  --grad-rule: linear-gradient(90deg, rgba(255,106,19,.5), rgba(255,106,19,0));

  --kerf: repeating-linear-gradient(90deg, rgba(242,237,225,.13) 0 1px, transparent 1px 14px);
  --tooth-image: radial-gradient(rgba(242,237,225,.055) .5px, transparent .5px);
  --tooth-size: 4px 4px;

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dur-reveal: .78s; --dur-hover: .35s;
  --reveal-rise: 22px; --reveal-stagger: 70ms;
  --hover-lift: translateY(-3px);
}

/* Client-site sub-theme, scoped */
.trm-client {
  --surface-page: #10150f; --surface-card: #161c14;
  --surface-recessed: #0f140e; --surface-inset: #101309; --surface-tile: #161c14;
  --grad-card: linear-gradient(180deg, #1b221a, #161c15);
  --grad-hero: linear-gradient(180deg, #151c13 0%, #10150f 100%);
  --display-hero: clamp(22px, 2.4vw, 28px);
  --leading-body: 1.55;
}