/*
 * Design tokens for the shop — the same values as the main site's theme.json and
 * design/SPEC.md §01–03. Every colour, size and spacing in the child theme goes
 * through one of these; nothing is inlined. Prefixed --tt- so nothing collides
 * with WoodMart's --wd-* properties.
 */
:root {
  /* Forest greens — dark surfaces */
  --tt-forest-0: #0d1712;
  --tt-forest-1: #12241a;
  --tt-forest-2: #16281d;
  --tt-forest-3: #1c3527;
  --tt-forest-card: #22402f;
  --tt-forest-rule: #2f5640;
  --tt-royal: #3a6b4a;
  --tt-moss: #5a8467;
  --tt-sage-1: #8fb098;
  --tt-sage-2: #a9c3af;
  --tt-sage-3: #bcd3c1;
  --tt-mist: #b3c2b7;
  --tt-on-green: #c3d0c6;
  --tt-nav: #eef0ea;
  --tt-footer-muted: #8a9d8f;
  --tt-footer-rule: #1f3327;
  --tt-payment-teal: #c7dfd9;

  /* Creams, rules and ink — light surfaces */
  --tt-cream: #f4f1ea;
  --tt-cream-hi: #f7f4ee;
  --tt-cream-alt: #ece7db;
  --tt-white: #ffffff;
  --tt-input: #faf8f3;
  --tt-track: #f0ece1;
  --tt-border: #e2dccd;
  --tt-rule: #d8d2c4;
  /* Interactive outlines stay visible against cream and input surfaces. */
  --tt-btn-outline: var(--tt-moss);
  --tt-chip-outline: var(--tt-moss);
  --tt-ink: #1c2b22;
  --tt-ink-2: #4a5b50;
  --tt-ink-3: #5a6b60;

  /* Status */
  --tt-error: #c05a4d;
  --tt-error-fill: #faf3f2;
  --tt-error-border: #f0e3e1;

  /* Translucent values the mocks use */
  --tt-hero-lede: #d7d2c8;
  --tt-outline-cream-50: rgba(244, 241, 234, 0.5);
  --tt-outline-cream-55: rgba(244, 241, 234, 0.55);
  --tt-chip-scrim: rgba(18, 36, 26, 0.72);
  --tt-tag-fill: rgba(244, 241, 234, 0.9);
  --tt-header-shadow: 0 6px 26px rgba(0, 0, 0, 0.22);
  --tt-print-shadow: 0 18px 40px rgba(28, 43, 34, 0.24), 0 2px 6px rgba(28, 43, 34, 0.14);
  --tt-print-shadow-pano: 0 14px 30px rgba(28, 43, 34, 0.22), 0 2px 6px rgba(28, 43, 34, 0.14);
  --tt-print-shadow-stage: 0 24px 50px rgba(28, 43, 34, 0.26), 0 2px 6px rgba(28, 43, 34, 0.14);
  --tt-print-shadow-thumb: 0 4px 10px rgba(28, 43, 34, 0.2);
  --tt-print-shadow-frame: 0 24px 50px rgba(28, 43, 34, 0.3);
  --tt-frame-black: #1c1c1c;
  --tt-frame-white: #f7f4ee;
  --tt-frame-natural: #c9a876;
  --tt-frame-gold: #b8955a;
  --tt-swatch-ring: 0 0 0 2px var(--tt-cream), 0 0 0 4px var(--tt-royal);
  --tt-scrim-quote: rgba(0, 0, 0, 0.72);
  --tt-scrim-hero: linear-gradient(270deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) min(100%, 1100px), rgba(0, 0, 0, 0.15) 100%);
  --tt-scrim-hero-2: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4) 100%);
  --tt-scrim-tile: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
  --tt-glow-cta: radial-gradient(120% 120% at 50% 0%, rgba(58, 107, 74, 0.35), transparent 60%);
  --tt-wall: linear-gradient(180deg, #efeadf 0%, #e6e0d2 84%, #d9d2c2 84%, #d9d2c2 85%, #cfc8b8 85%, #cfc8b8 100%);

  /* Type */
  --tt-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tt-sans: Jost, "Helvetica Neue", Arial, sans-serif;
  --tt-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /*
   * The main site's scale (little-my theme.json fontSizes), same slugs and
   * values: rem on a 17px root, nothing below 12px. Where the shop mocks used
   * a size the scale lacks, the nearest step is taken.
   */
  --tt-size-display-hero: clamp(2.5882rem, 7vw, 5.7647rem);
  --tt-size-display-page: clamp(2.3529rem, 6vw, 5.4118rem);
  --tt-size-display-cover: clamp(2.5882rem, 7vw, 6.1176rem);
  --tt-size-title: clamp(2.2353rem, 4.4vw, 3.5294rem);
  --tt-size-title-cta: clamp(2.2353rem, 5vw, 4rem);
  --tt-size-title-m: clamp(2rem, 4.2vw, 3.2941rem);
  --tt-size-title-s: clamp(1.8824rem, 3.8vw, 2.9412rem);
  --tt-size-card-title: 1.8824rem;
  --tt-size-card-title-l: 2rem;
  --tt-size-card-title-s: 1.3529rem;
  --tt-size-small-title: 1.5294rem;
  --tt-size-numeral: 2.7059rem;
  --tt-size-numeral-price: 2.5882rem;
  --tt-size-numeral-stat: clamp(2.5882rem, 5vw, 3.7647rem);
  --tt-size-numeral-step: 2.3529rem;
  --tt-size-price-card: 1.4118rem;
  --tt-size-price-foot: 1.2941rem;
  --tt-size-quote: 1.2941rem;
  --tt-size-pull-quote: clamp(1.5294rem, 3.2vw, 2.4706rem);
  --tt-size-quote-mark: 4.7059rem;
  --tt-size-menu-mobile: 2.2353rem;
  --tt-size-lede: clamp(0.9412rem, 1.3vw, 1.1176rem);
  --tt-size-body: 1rem;
  --tt-size-body-s: 0.9118rem;
  --tt-size-body-xs: 0.8235rem;
  --tt-size-value: 0.9412rem;
  --tt-size-input: 0.8824rem;
  --tt-size-nav: max(12px, 0.7941rem);
  --tt-size-button: max(12px, 0.8235rem);
  --tt-size-kicker: max(12px, 0.7647rem);
  --tt-size-kicker-hero: max(12px, 0.8235rem);
  --tt-size-caption: max(12px, 0.7353rem);
  --tt-size-mono: max(12px, 0.7353rem);
  --tt-size-mono-s: max(12px, 0.7059rem);
  --tt-size-chip: max(12px, 0.7059rem);

  --tt-lh-body: 1.85;
  --tt-lh-copy: 1.7;
  --tt-lh-lede: 1.7;
  --tt-lh-tight: 1.02;
  --tt-lh-display: 0.98;

  --tt-tracking-nav: 0.15em;
  --tt-tracking-kicker: 0.3em;
  --tt-tracking-hero-kicker: 0.32em;
  --tt-tracking-caption: 0.14em;
  --tt-tracking-button: 0.12em;
  --tt-tracking-label: 0.1em;
  --tt-tracking-opt: 0.06em;
  --tt-tracking-opt-sub: 0.04em;
  --tt-tracking-toggle: 0.06em;
  --tt-tracking-mono: 0.16em;
  --tt-tracking-attribution: 0.2em;
  --tt-tracking-display: -0.01em;

  /* Spacing and layout */
  --tt-section-x: clamp(28px, 6vw, 96px);
  --tt-section-y: clamp(80px, 10vw, 150px);
  --tt-section-y-sub: clamp(64px, 8vw, 120px);
  --tt-section-y-intro: clamp(64px, 8vw, 110px);
  --tt-head-gap: clamp(40px, 5vw, 64px);
  --tt-container: 1400px;
  --tt-container-text: 1300px;
  --tt-container-header: 1560px;
  --tt-measure: 560px;
  --tt-measure-lede: 520px;
  --tt-measure-lede-narrow: 420px;
  --tt-gap-cards: 26px;
  --tt-gap-tiles: 20px;
  --tt-gap-steps: clamp(24px, 3vw, 44px);
  --tt-gap-buttons: 14px;
  --tt-card-min: 340px;
  --tt-tile-min: 280px;
  --tt-step-min: 220px;
  --tt-footer-col-min: 220px;
  --tt-payment-margin: clamp(40px, 5vw, 64px);
  --tt-payment-panel-padding: clamp(24px, 3vw, 36px);
  --tt-payment-group-gap: 32px;
  --tt-payment-card-gap: clamp(8px, 1vw, 12px);
  --tt-payment-bank-width: 180px;
  --tt-payment-card-width: clamp(44px, 4.5vw, 64px);
  --tt-payment-card-height: 44px;
  --tt-payment-cards-basis: 368px;
  --tt-payment-security-width: 96px;
  --tt-payment-security-height: 60px;
  --tt-payment-security-basis: 420px;

  /* Shape, motion, targets */
  --tt-radius-pill: 999px;
  --tt-radius-input: 8px;
  --tt-tap-target: 44px;
  --tt-focus-width: 2px;
  --tt-focus-offset: 4px;
  --tt-button-height: 48px;
  --tt-button-padding: 15px 32px;
  --tt-input-height: 48px;
  --tt-input-padding: 13px 14px;
  --tt-opt-height: 46px;
  --tt-opt-padding: 10px 18px;
  --tt-buy-height: 52px;
  --tt-thumb: 92px;
  --tt-motion-header: 0.45s;
  --tt-motion-zoom: 0.7s;
  --tt-motion-chip: 0.25s;
  --tt-ease: ease;
  /* A 64px desktop mark in the 80px header; 56px in the 76px mobile row. */
  --tt-logo-height: 3.7647rem;
  --tt-logo-height-mobile: 3.2941rem;
  --tt-logo-height-footer: 52px;
  --tt-header-padding: 14px;
  --tt-nav-gap: 36px;
  --tt-icon: 18px;
  --tt-icon-s: 14px;
  --tt-hairline: 1px;
}