/**
 * HP-TOKENS.CSS
 * Apple-tier refinements for light mode homepage
 *
 * PRINCIPLES (from VISUAL_REFERENCE.md):
 * - Shadows are nearly invisible in light mode
 * - Depth from luminance steps, not heavy shadows
 * - One accent color (teal) for interactive elements
 * - Weight + color create hierarchy, not size
 * - Tight luminance ranges like ChatGPT
 */

/* =============================================================================
   PRODUCT SCREENSHOTS - Subtle depth (Apple-level restraint)
   Per UI_SPEC: "Shadows are RARE. In light mode, shadows are the primary depth
   cue but kept extremely subtle (Apple-level restraint)"
   ============================================================================= */

.service-item1-img,
.service-item2-img,
.image-9,
.image-10,
.ts-img1,
.ts-img2,
.oc-image img {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);  /* Apple-level subtle */
  border: 1px solid rgba(0, 0, 0, 0.06);       /* Barely visible definition */
  border-radius: 12px;                          /* Consistent with --radius-md */
}

/* Hero images - slightly more presence */
.hero-image,
.benefits-img-1,
.benefits-img-2,
.benefits-img-3,
.benefits-img-4 {
  border-radius: 12px;
}

/* =============================================================================
   TYPOGRAPHY HIERARCHY - Weight + Color (not size)
   Per VISUAL_REFERENCE: "Weight creates hierarchy, not size.
   The delta between sizes is small. The delta between weights and colors is large."

   Grey scale from Webflow:
   - #0a0a0a (text-color) - Headlines, primary
   - #262626 (color-8) - Strong emphasis
   - #404040 (color-7) - Secondary headings
   - #525252 (color-6) - Body text
   - #737373 (color-5) - Descriptions
   - #a1a1a1 (color-4) - Tertiary/hints
   ============================================================================= */

/* Headlines - darkest, weight 500 (already set in Webflow) */
h1, h2, h3 {
  color: var(--_colors---text-color);  /* #0a0a0a */
  font-weight: 500;
}

/* Body text - mid grey */
.text-hero1,
.pre-about-text,
.text-benefits,
.text-services-item1,
.txt-service-item2,
.text-block-91,
.text-block-92,
.cta-text1 {
  color: var(--_colors---color-6);  /* #525252 */
  font-weight: 400;
}

/* Descriptions / secondary text - lighter grey */
.about-text1,
.about-text2,
.bnf-text1,
.bnf-text2,
.bnf-text3,
.bnf-text4,
.single-item-desc {
  color: var(--_colors---color-5);  /* #737373 */
  font-weight: 400;
}

/* Section subheadings - between headline and body */
.srv-text,
.txt-heading-srv2,
.text-block-39,
.text-block-43 {
  color: var(--_colors---color-5);  /* #737373 */
  font-weight: 400;
}

/* Feature titles in cards */
.heading-item1-srv,
.heading-srv2,
.text-block-38,
.text-block-42,
.single-item-title {
  color: var(--_colors---text-color);  /* #0a0a0a */
  font-weight: 500;
}

/* Section labels (Ledger, Related context) */
.single-item-client {
  color: var(--_colors---accent);  /* Teal for labels */
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================================================================
   SECTION NUMBERS - Already teal in Webflow, ensure consistency
   ============================================================================= */

.about-subtext,
.number-benefits,
.number-service,
.number-impact {
  color: var(--_colors---accent);  /* #3A7C9D */
  font-weight: 500;
}

/* =============================================================================
   CTA SECTION - Atmospheric dark background, no image
   Replaces the 6MB yacht photo with CSS-only teal glow.
   Per IMAGE_DOCTRINE: "UI floating in intentional darkness"
   ============================================================================= */

.cta-section {
  background: #0A0A0A !important;
}

.cta-image {
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(58,124,157,0.12) 0%, rgba(30,90,130,0.05) 40%, rgba(10,10,10,1) 75%) !important;
}

.cta-heading {
  color: rgba(255,255,255,0.92) !important;
  position: relative;
  z-index: 1;
}

.cta-text1 {
  color: rgba(255,255,255,0.55) !important;
  position: relative;
  z-index: 1;
}

.cta-section .hero-button.white,
.dark-mode .cta-section .hero-button.white {
  color: #0A0A0A !important;
  background-color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.92) !important;
}

.cta-section .hero-button.white:hover,
.dark-mode .cta-section .hero-button.white:hover {
  background-color: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* Arrow icons inside CTA button — dark to match button text */
.cta-section .hero-button.white .hero-button-icon {
  filter: brightness(0) !important;
}

/* CTA button text colour override */
.cta-section .hero-button.white .text-hero2 {
  color: #0A0A0A !important;
}

/* =============================================================================
   CTA BUTTONS - Teal interactive, proper hover states
   ============================================================================= */

.hero-button {
  transition: background-color 120ms ease-out, transform 120ms ease-out;
}

.hero-button:hover {
  background-color: rgba(58, 124, 157, 0.08);  /* Subtle teal tint on hover */
}

.hero-button.white:hover {
  background-color: rgba(255, 255, 255, 0.95);
}

/* =============================================================================
   SPACING REFINEMENTS - Generous whitespace (ChatGPT principle)
   Per VISUAL_REFERENCE: "There is MORE empty space than content on desktop"
   ============================================================================= */

/* Ensure sections have breathing room */
.services-section,
.impact-section,
.oc-section,
.testimonial-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* =============================================================================
   BORDERS - Structural, not decorative
   Per UI_SPEC: "Borders are structural, never decorative"
   ============================================================================= */

/* Service items - subtle separator */
.service-item1,
.service-item2,
.div-block-63,
.div-block-64 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 48px;
  margin-bottom: 48px;
}

.service-item1:last-child,
.service-item2:last-child,
.div-block-63:last-child,
.div-block-64:last-child {
  border-bottom: none;
}

/* =============================================================================
   ACCESSIBILITY - Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-button,
  .service-item1-img,
  .service-item2-img {
    transition: none;
  }
}