/* ============================================================================
   Flip 360 — Brand tokens
   Derived from flip360.ai marketing site (hero, "How it works", "Why Choose").
   Single source of truth for colour, type, radius, shadow.
   ============================================================================ */

:root {
  /* ---- Primary palette (the actual Flip 360 brand) ---- */
  /* Brand colours taken DIRECTLY from official SVG assets (Asset 2/4/5.svg) */
  --f360-navy:        #0c2b47;   /* Official navy — logo wordmark */
  --f360-navy-deep:   #08203a;   /* Deeper for hover/active */
  --f360-navy-mid:    #14406a;   /* Mid tone for gradients */
  --f360-navy-hi:     #1e6e8d;   /* Top of hero gradient */
  --f360-teal:        #1ba9a2;   /* Official teal — logomark / swoosh */
  --f360-teal-alt:    #31a59f;   /* Official alt-teal (from horizontal logo) */
  --f360-teal-light:  #2dc7be;   /* Lighter aqua for highlights on dark */
  --f360-teal-pale:   #b9e6e2;   /* Pale teal for soft backgrounds */
  --f360-green:       #2ecc71;   /* Semantic positive delta ONLY — not a logo colour */
  --f360-green-deep:  #1f9d54;
  --f360-gold:        #d6c08a;   /* Warm gold/tan — headline accent & primary CTA on dark */
  --f360-gold-deep:   #c2a868;   /* Hover state for gold buttons */
  --f360-gold-pale:   #f0e6c8;   /* Tinted gold backgrounds */

  /* ---- Hero gradient (matches "Ready to be connected" banner) ---- */
  --f360-hero-grad:   linear-gradient(180deg, #1e6e8d 0%, #14536e 45%, #0e3a52 100%);
  --f360-hero-vignette: radial-gradient(circle at 50% 30%, rgba(61,214,232,0.12) 0%, transparent 60%);

  /* ---- Neutrals ---- */
  --f360-cream:       #fdf9ed;   /* Warm cream — page background */
  --f360-cream-2:     #f5efd9;   /* Slightly deeper cream */
  --f360-white:       #ffffff;
  --f360-paper:       #fafbfc;   /* Subtle off-white for cards on cream */
  --f360-ink:         #0a2e3f;   /* Body text */
  --f360-ink-2:       #4a6470;   /* Secondary text */
  --f360-ink-3:       #7a8d96;   /* Tertiary, captions */
  --f360-rule:        #e3e8ea;   /* Hairline borders */
  --f360-rule-2:      #d0d8db;
  
  /* ---- Status colours (for ledger statuses) ---- */
  --f360-status-pending:    #c8861d;   /* Amber */
  --f360-status-pending-bg: #fdf5e6;
  --f360-status-cooling:    #6a4fb6;   /* Indigo — cooling off */
  --f360-status-cooling-bg: #efeafa;
  --f360-status-eligible:   #1ba9a2;   /* Brand teal */
  --f360-status-eligible-bg:#e6f6f4;
  --f360-status-approved:   #1f7a3a;   /* Forest */
  --f360-status-approved-bg:#e6f4eb;
  --f360-status-paid:       #2ecc71;   /* Brand green */
  --f360-status-paid-bg:    #e6f9ee;
  --f360-status-clawback:   #c0392b;   /* Red */
  --f360-status-clawback-bg:#fdecea;
  --f360-status-void:       #7a8d96;
  --f360-status-void-bg:    #eef1f2;
  
  /* ---- Type scale ---- */
  --f360-font-display: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f360-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f360-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  
  /* ---- Geometry ---- */
  --f360-radius-sm:  6px;
  --f360-radius:     10px;
  --f360-radius-lg:  16px;
  --f360-radius-xl:  24px;
  --f360-radius-pill:9999px;
  
  /* ---- Shadow ---- */
  --f360-shadow-sm:  0 1px 2px rgba(10,46,63,0.06);
  --f360-shadow:     0 4px 14px rgba(10,46,63,0.08);
  --f360-shadow-lg:  0 12px 36px rgba(10,46,63,0.12);
  --f360-shadow-inset:inset 0 1px 0 rgba(255,255,255,0.4);
  
  /* ---- Spacing rhythm ---- */
  --f360-gap-xs: 4px;
  --f360-gap-sm: 8px;
  --f360-gap:    16px;
  --f360-gap-md: 24px;
  --f360-gap-lg: 32px;
  --f360-gap-xl: 48px;
}

/* ============================================================================
   Logo helpers — drop the SVG in via <img> or inline.
   ============================================================================ */

.f360-logo {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.f360-logo img,
.f360-logo svg {
  display: block;
  height: auto;
}
.f360-logo--sm img,
.f360-logo--sm svg { height: 28px; width: auto; }
.f360-logo--md img,
.f360-logo--md svg { height: 40px; width: auto; }
.f360-logo--lg img,
.f360-logo--lg svg { height: 56px; width: auto; }

/* ============================================================================
   Brand-aware utility classes (for use inside Tailwind-flavoured JSX)
   ============================================================================ */

.f360-bg-cream     { background-color: var(--f360-cream); }
.f360-bg-navy      { background-color: var(--f360-navy); color: #fff; }
.f360-bg-teal      { background-color: var(--f360-teal); color: #fff; }
.f360-bg-teal-pale { background-color: var(--f360-teal-pale); color: var(--f360-navy); }
.f360-bg-paper     { background-color: var(--f360-paper); }

.f360-text-navy { color: var(--f360-navy); }
.f360-text-teal { color: var(--f360-teal); }
.f360-text-mute { color: var(--f360-ink-2); }
.f360-text-soft { color: var(--f360-ink-3); }

.f360-border    { border: 1px solid var(--f360-rule); }
.f360-border-b  { border-bottom: 1px solid var(--f360-rule); }
.f360-border-t  { border-top: 1px solid var(--f360-rule); }

/* Brand display heading — matches "WHY CHOOSE FLIP360?" weight */
.f360-display {
  font-family: var(--f360-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--f360-navy);
  line-height: 1.05;
}

/* Primary CTA — matches "Start Referring" pill button */
.f360-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--f360-radius-pill);
  font-family: var(--f360-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.f360-btn:active { transform: translateY(1px); }
.f360-btn-primary {
  background: var(--f360-navy);
  color: var(--f360-white);
}
.f360-btn-primary:hover { background: var(--f360-navy-deep); box-shadow: var(--f360-shadow); }
.f360-btn-teal {
  background: var(--f360-teal);
  color: var(--f360-white);
}
.f360-btn-teal:hover { background: #168a84; box-shadow: var(--f360-shadow); }
.f360-btn-ghost {
  background: transparent;
  color: var(--f360-navy);
  border-color: var(--f360-navy);
}
.f360-btn-ghost:hover { background: var(--f360-navy); color: var(--f360-white); }
.f360-btn-ghost-on-dark {
  background: transparent;
  color: var(--f360-white);
  border-color: var(--f360-white);
}
.f360-btn-ghost-on-dark:hover { background: var(--f360-white); color: var(--f360-navy); }
.f360-btn-gold {
  background: var(--f360-gold);
  color: var(--f360-navy);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.f360-btn-gold:hover { background: var(--f360-gold-deep); box-shadow: var(--f360-shadow); }
.f360-btn-lg { padding: 16px 32px; font-size: 15px; }

/* ============================================================================
   Brand signature: split-color headline
   White base + teal accent + gold accent in one phrase.
   Use .f360-headline as parent, then mark accents with .f360-accent-teal /
   .f360-accent-gold on inner <span>.
   ============================================================================ */

.f360-headline {
  font-family: var(--f360-font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--f360-white);
  text-transform: uppercase;
}
.f360-headline .f360-accent-teal { color: var(--f360-teal-light); }
.f360-headline .f360-accent-gold { color: var(--f360-gold); }

/* On light surfaces, swap the base to navy */
.f360-headline--on-light { color: var(--f360-navy); }
.f360-headline--on-light .f360-accent-teal { color: var(--f360-teal); }
.f360-headline--on-light .f360-accent-gold { color: var(--f360-gold-deep); }

/* ============================================================================
   Hero surface — the deep teal gradient with wave motifs
   ============================================================================ */

.f360-hero-surface {
  position: relative;
  background: var(--f360-hero-grad);
  color: var(--f360-white);
  overflow: hidden;
  isolation: isolate;
}
.f360-hero-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--f360-hero-vignette);
  pointer-events: none;
  z-index: 0;
}
.f360-hero-surface > * { position: relative; z-index: 1; }

/* Decorative wave SVG sits absolutely inside .f360-hero-surface */
.f360-hero-waves {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 60%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.f360-hero-waves svg { width: 100%; height: 100%; display: block; }

/* Status pill */
.f360-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--f360-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.f360-pill[data-status="PENDING"]      { background: var(--f360-status-pending-bg);  color: var(--f360-status-pending); }
.f360-pill[data-status="COOLING_OFF"]  { background: var(--f360-status-cooling-bg);  color: var(--f360-status-cooling); }
.f360-pill[data-status="ELIGIBLE"]     { background: var(--f360-status-eligible-bg); color: var(--f360-status-eligible); }
.f360-pill[data-status="APPROVED"]     { background: var(--f360-status-approved-bg); color: var(--f360-status-approved); }
.f360-pill[data-status="PAID"]         { background: var(--f360-status-paid-bg);     color: var(--f360-status-paid); }
.f360-pill[data-status="CLAWED_BACK"]  { background: var(--f360-status-clawback-bg); color: var(--f360-status-clawback); }
.f360-pill[data-status="VOID"]         { background: var(--f360-status-void-bg);     color: var(--f360-status-void); }

/* Card */
.f360-card {
  background: var(--f360-white);
  border-radius: var(--f360-radius-lg);
  box-shadow: var(--f360-shadow);
  padding: var(--f360-gap-md);
}
.f360-card-flat {
  background: var(--f360-white);
  border-radius: var(--f360-radius-lg);
  border: 1px solid var(--f360-rule);
  padding: var(--f360-gap-md);
}
.f360-card-teal {
  background: var(--f360-teal);
  color: var(--f360-white);
  border-radius: var(--f360-radius-xl);
  padding: var(--f360-gap-lg);
}
.f360-card-navy {
  background: var(--f360-navy);
  color: var(--f360-white);
  border-radius: var(--f360-radius-xl);
  padding: var(--f360-gap-lg);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f360-btn { transition: none; }
}