/* 
 * Scafari Custom Styles
 * Aesthetic: Polished, safari-inspired, grounded, and approachable.
 * Palette:
 *   - Acacia Green:    #5B6B4F (Primary brand color: headers, key UI elements)
 *   - Olive Sage:      #8A8C63 (Supporting green: secondary buttons, active states)
 *   - Dune Sand:       #D8C7A3 (Warm secondary neutral: cards, surfaces, containers)
 *   - Terracotta Clay: #B86E4B (Refined accent: CTAs, highlights, active elements)
 *   - Sunlit Ochre:    #C6A35A (Reward accent: badges, points, celebratory moments)
 *   - Canvas Cream:    #F2EBDD (Background neutral: main background & breathing room)
 *   - Dust Mist:       #E4DED2 (Soft supporting neutral: subtle containers & dividers)
 *   - Charcoal Bark:   #3F4338 (Text & icon color: headings, body text, key UI)
 */

/* Warm Canvas Cream (#F2EBDD) with subtle topographic contour lines & faint paw prints */
.bg-seaglass-canvas,
.bg-safari-canvas {
  background-color: #F2EBDD;
  background-image:
    radial-gradient(at 15% 10%, rgba(216, 199, 163, 0.35) 0px, transparent 50%),
    radial-gradient(at 88% 85%, rgba(138, 140, 99, 0.14) 0px, transparent 55%),
    url("data:image/svg+xml,%3Csvg width='260' height='260' viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 55 Q 65 25 130 55 T 260 55 M0 130 Q 85 95 155 130 T 260 130 M0 205 Q 60 175 135 205 T 260 205' fill='none' stroke='%23D8C7A3' stroke-width='1.15' stroke-opacity='0.45'/%3E%3Cg fill='%23D8C7A3' fill-opacity='0.22' transform='translate(200, 28) rotate(-25)'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5' cy='9' r='2.2'/%3E%3Ccircle cx='9.5' cy='6.5' r='2.2'/%3E%3Ccircle cx='14.5' cy='6.5' r='2.2'/%3E%3Ccircle cx='19' cy='9' r='2.2'/%3E%3C/g%3E%3Cg fill='%23D8C7A3' fill-opacity='0.18' transform='translate(222, 62) rotate(-18)'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5' cy='9' r='2.2'/%3E%3Ccircle cx='9.5' cy='6.5' r='2.2'/%3E%3Ccircle cx='14.5' cy='6.5' r='2.2'/%3E%3Ccircle cx='19' cy='9' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Deep Acacia Green & Charcoal Bark Topographic Surface for Hero / Dark Panels */
.bg-abyssal-topo,
.bg-acacia-topo {
  background-color: #46543C;
  background-image:
    radial-gradient(at 50% 0%, rgba(138, 140, 99, 0.28) 0px, transparent 65%),
    linear-gradient(165deg, #5B6B4F 0%, #3F4338 100%),
    url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-20 35 Q 40 5 90 35 T 180 35 M-20 80 Q 50 50 100 80 T 180 80 M-20 125 Q 35 95 95 125 T 180 125' fill='none' stroke='%23F2EBDD' stroke-width='1.1' stroke-opacity='0.09'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, overlay;
}

/* Topographic swatch texture overlay (matches the contour lines inside swatches on the palette sheet) */
.swatch-topo {
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='100' viewBox='0 0 140 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 20 Q 35 -5 75 25 T 150 20 M-10 55 Q 40 30 85 60 T 150 55 M-10 85 Q 30 65 80 90 T 150 85' fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-opacity='0.14'/%3E%3C/svg%3E");
}

/* Soft, Warm Elevated Card Surface (Warm Ivory #FAF6EE with Dust Mist #E4DED2 border) */
.card-clean,
.card-tactile {
  background-color: #FAF6EE;
  border: 1px solid #E4DED2;
  box-shadow:
    0 10px 26px -6px rgba(63, 67, 56, 0.08),
    0 3px 8px -2px rgba(63, 67, 56, 0.04);
}

.card-tactile-sm {
  border: 1px solid #E4DED2;
  box-shadow: 0 4px 12px -2px rgba(63, 67, 56, 0.07);
}

/* Pill / Capsule Primary CTA Button — Terracotta Clay (#B86E4B) */
.btn-pill-coral,
.btn-tactile-amber {
  background-color: #B86E4B;
  color: #FAF6EE;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -3px rgba(184, 110, 75, 0.42);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-pill-coral:hover,
.btn-tactile-amber:hover {
  background-color: #A35D3C;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -3px rgba(184, 110, 75, 0.52);
}

.btn-pill-coral:active,
.btn-tactile-amber:active {
  transform: translateY(0);
}

/* Pill / Capsule Dark Button — Charcoal Bark (#3F4338) / Acacia Green (#5B6B4F) */
.btn-pill-deep {
  background-color: #3F4338;
  color: #FAF6EE;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -3px rgba(63, 67, 56, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-pill-deep:hover {
  background-color: #5B6B4F;
  transform: translateY(-1px);
}

/* Pill / Capsule Supporting Green Button — Olive Sage (#8A8C63) / Acacia Green (#5B6B4F) */
.btn-pill-seaglass,
.btn-tactile-emerald {
  background-color: #5B6B4F;
  color: #FAF6EE;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -3px rgba(91, 107, 79, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-pill-seaglass:hover,
.btn-tactile-emerald:hover {
  background-color: #4A5840;
  transform: translateY(-1px);
}

/* Soft Dust Mist / Dune Sand Secondary Pill Button */
.btn-pill-mist,
.btn-tactile-stone {
  background-color: #E4DED2;
  color: #3F4338;
  border: 1px solid #D8C7A3;
  border-radius: 9999px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-pill-mist:hover,
.btn-tactile-stone:hover {
  background-color: #D8C7A3;
  transform: translateY(-1px);
}

/* Trail Code Input Styling */
.trail-code-input {
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.trail-code-input::placeholder {
  letter-spacing: 0.16em;
  opacity: 0.42;
}

/* Spaced small-caps tagline ("EXPLORE • FIND • DISCOVER") */
.tagline-spaced {
  letter-spacing: 0.22em;
}