/* ==========================================================================
   FREEPORT MARKETS — SHARED DESIGN FOUNDATION
   --------------------------------------------------------------------------
   Additive layer loaded AFTER the Webflow stylesheet. Defines the design
   tokens, type scale, background treatment, and reusable button system that
   future section redesigns build on. Does NOT restructure any sections.

   Approved direction:
     • Base: white / warm off-white (most areas)
     • Palette: dark premium ink + occasional dark feature surfaces
     • Accent: ONE — Bright Orange #2f8bff (from the brand deck / logo marks)
     • Display font: Space Grotesk  •  Text font: Raleway
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* --- Brand source colors (from the deck's Color Guidelines) --- */
  --fp-orange:        #2f8bff;   /* the single accent */
  --fp-slate:         #32464d;   /* dark slate green */
  --fp-sage:          #7a949d;   /* muted steel sage */
  --fp-mint:          #dbf2ed;   /* light green */
  --fp-sky:           #d0e8ff;   /* light blue */
  --fp-charcoal:      #231f20;   /* deck's warm near-black */

  /* --- Surfaces / backgrounds (light base) --- */
  --fp-bg:            #f7f5f1;   /* page base — warm off-white */
  --fp-bg-2:          #f1eee8;   /* subtly recessed band */
  --fp-surface:       #ffffff;   /* cards / raised surfaces */
  --fp-surface-2:     #fbfaf7;   /* soft card */

  /* --- Dark "premium" surfaces (for feature sections) --- */
  --fp-dark:          #1a1714;   /* warm near-black */
  --fp-dark-2:        #231f20;   /* brand charcoal */
  --fp-dark-3:        #2b2723;   /* raised on dark */

  /* --- Ink / text --- */
  --fp-ink:           #1b1714;   /* primary text on light */
  --fp-ink-2:         #5c5852;   /* secondary text on light */
  --fp-ink-3:         #8a857d;   /* tertiary / captions */
  --fp-on-dark:       #f7f5f1;   /* primary text on dark */
  --fp-on-dark-2:     rgba(247,245,241,.66);
  --fp-on-dark-3:     rgba(247,245,241,.42);

  /* --- Accent scale --- */
  --fp-accent:         var(--fp-orange);
  --fp-accent-hover:   #1e7ae6;  /* hover (darker) */
  --fp-accent-press:   #1763c9;  /* active */
  --fp-accent-ink:     #1565c0;  /* AA-safe orange for text/links on white */
  --fp-accent-soft:    rgba(47,139,255,.12);  /* tint fills */
  --fp-accent-softer:  rgba(47,139,255,.06);
  --fp-accent-contrast:#ffffff;  /* text on an accent fill */

  /* --- Lines / borders --- */
  --fp-line:          rgba(27,23,20,.10);
  --fp-line-strong:   rgba(27,23,20,.18);
  --fp-line-on-dark:  rgba(247,245,241,.14);

  /* --- Typography --- */
  --fp-font-serif:   "Fraunces", "Newsreader", Georgia, "Times New Roman", serif; /* display headlines (hero + section titles) */
  --fp-font-display: "Space Grotesk", "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; /* labels, eyebrows, buttons, card titles */
  --fp-font-body:    "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Modern modular type scale (responsive; ~1.25 major third) */
  --fp-text-xs:    .75rem;     /* 12 */
  --fp-text-sm:    .875rem;    /* 14 */
  --fp-text-base:  1rem;       /* 16 */
  --fp-text-lg:    1.125rem;   /* 18 */
  --fp-text-xl:    clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fp-h6:         clamp(1.1rem,  1.02rem + .4vw, 1.25rem);
  --fp-h5:         clamp(1.35rem, 1.2rem + .7vw, 1.6rem);
  --fp-h4:         clamp(1.6rem,  1.35rem + 1.1vw, 2rem);
  --fp-h3:         clamp(2rem,    1.6rem + 1.9vw, 2.75rem);
  --fp-h2:         clamp(2.5rem,  1.9rem + 2.9vw, 3.75rem);
  --fp-h1:         clamp(3rem,    2.1rem + 4.2vw, 4.75rem);
  --fp-display:    clamp(3.5rem,  2.2rem + 6vw,   6rem);

  /* Weights / line-height / tracking */
  --fp-w-light: 300;
  --fp-w-regular: 400;
  --fp-w-medium: 500;
  --fp-w-semibold: 600;
  --fp-w-bold: 700;
  --fp-leading-display: 1.02;
  --fp-leading-tight:   1.12;
  --fp-leading-snug:    1.3;
  --fp-leading-body:    1.6;
  --fp-tracking-display: -0.025em;
  --fp-tracking-tight:   -0.01em;
  --fp-tracking-wide:    0.12em;   /* eyebrows / labels */

  /* --- Spacing scale (generous, 4px base) --- */
  --fp-space-1:  .25rem;
  --fp-space-2:  .5rem;
  --fp-space-3:  .75rem;
  --fp-space-4:  1rem;
  --fp-space-5:  1.5rem;
  --fp-space-6:  2rem;
  --fp-space-7:  3rem;
  --fp-space-8:  4rem;
  --fp-space-9:  6rem;
  --fp-space-10: 8rem;
  --fp-section-y: clamp(4rem, 2.8rem + 6vw, 8rem);  /* vertical section rhythm */
  --fp-section-y-sm: clamp(3rem, 2.2rem + 4vw, 5.5rem);  /* tighter inner sections */
  --fp-gutter:    clamp(1.5rem, .75rem + 3.5vw, 3rem);
  --fp-card-pad: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);  /* card internal padding */
  --fp-grid-gap: clamp(1rem, .8rem + 1vw, 1.75rem);  /* between grid/card items */
  --fp-container: 1200px;

  /* --- Radii --- */
  --fp-radius-xs:  .375rem;
  --fp-radius-sm:  .625rem;
  --fp-radius-md:  .875rem;
  --fp-radius-lg:  1.25rem;
  --fp-radius-xl:  2rem;
  --fp-radius-pill: 999px;

  /* --- Shadows (soft, warm, premium) --- */
  --fp-shadow-sm: 0 1px 2px rgba(27,23,20,.06), 0 1px 1px rgba(27,23,20,.04);
  --fp-shadow-md: 0 8px 24px -8px rgba(27,23,20,.14), 0 2px 6px rgba(27,23,20,.06);
  --fp-shadow-lg: 0 28px 60px -22px rgba(27,23,20,.28), 0 8px 20px -10px rgba(27,23,20,.12);
  --fp-shadow-accent: 0 10px 30px -8px rgba(47,139,255,.45);

  /* --- Motion --- */
  --fp-ease: cubic-bezier(.2, .7, .2, 1);
  --fp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fp-dur-fast: .16s;
  --fp-dur: .28s;
  --fp-dur-slow: .5s;

  /* Aliases onto Webflow's existing variable names (keeps both in sync) */
  --bright-orange: var(--fp-orange);
}

/* ------------------------------------------------------ GLOBAL BASE (SAFE) */
/* Low-specificity defaults only — existing section/element rules still win,
   so current dark sections keep their own backgrounds and text colors. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--fp-bg);
  color: var(--fp-ink);
  font-family: var(--fp-font-body);
  font-weight: var(--fp-w-regular);
  font-size: var(--fp-text-base);
  line-height: var(--fp-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hyper-modern background: warm off-white + faint accent glow + fine grain.
   Fixed so it reads as an ambient field behind transparent sections. */
.fp-bg-field,
body.fp-bg-field {
  position: relative;
}
body.fp-bg-field::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(47,139,255,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(122,148,157,.10), transparent 50%),
    linear-gradient(180deg, var(--fp-bg) 0%, var(--fp-bg-2) 100%);
  pointer-events: none;
}
body.fp-bg-field::after { /* ultra-fine grain for a premium, non-flat surface */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selection + accessible focus ring use the accent */
::selection { background: var(--fp-accent); color: #fff; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: 2px;
  border-radius: var(--fp-radius-xs);
}

/* Themed scrollbar (WebKit) */
@supports (selector(::-webkit-scrollbar)) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb {
    background: var(--fp-line-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--fp-accent); background-clip: padding-box; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------- TYPE SCALE HELPERS */
/* Default display family for headings (safe: family/tracking/leading only —
   does not force color, so existing colored headings are unaffected). */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--fp-font-display);
  letter-spacing: var(--fp-tracking-tight);
  line-height: var(--fp-leading-tight);
}

/* Opt-in utility classes for the redesign work to come */
.fp-display {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-w-bold);
  font-size: var(--fp-display);
  line-height: var(--fp-leading-display);
  letter-spacing: var(--fp-tracking-display);
}
.fp-h1 { font-family: var(--fp-font-display); font-weight: var(--fp-w-semibold); font-size: var(--fp-h1); line-height: var(--fp-leading-display); letter-spacing: var(--fp-tracking-display); }
.fp-h2 { font-family: var(--fp-font-display); font-weight: var(--fp-w-semibold); font-size: var(--fp-h2); line-height: var(--fp-leading-tight); letter-spacing: var(--fp-tracking-tight); }
.fp-h3 { font-family: var(--fp-font-display); font-weight: var(--fp-w-semibold); font-size: var(--fp-h3); line-height: var(--fp-leading-tight); }
.fp-h4 { font-family: var(--fp-font-display); font-weight: var(--fp-w-medium);  font-size: var(--fp-h4); line-height: var(--fp-leading-snug); }
.fp-h5 { font-family: var(--fp-font-display); font-weight: var(--fp-w-medium);  font-size: var(--fp-h5); line-height: var(--fp-leading-snug); }
.fp-h6 { font-family: var(--fp-font-display); font-weight: var(--fp-w-medium);  font-size: var(--fp-h6); line-height: var(--fp-leading-snug); }

.fp-lead { font-size: var(--fp-text-xl); line-height: var(--fp-leading-snug); color: var(--fp-ink-2); }
.fp-body { font-size: var(--fp-text-base); line-height: var(--fp-leading-body); }
.fp-small { font-size: var(--fp-text-sm); }

/* Eyebrow / label */
.fp-eyebrow {
  font-family: var(--fp-font-body);
  font-weight: var(--fp-w-semibold);
  font-size: var(--fp-text-sm);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-accent-ink);
}

/* Color helpers */
.fp-text-ink    { color: var(--fp-ink); }
.fp-text-muted  { color: var(--fp-ink-2); }
.fp-text-accent { color: var(--fp-accent-ink); }
.fp-on-dark     { color: var(--fp-on-dark); }

/* ------------------------------------------------------------ SURFACES */
.fp-section { padding-block: var(--fp-section-y); }
.fp-container {
  width: 100%;
  max-width: var(--fp-container);
  margin-inline: auto;
  padding-inline: var(--fp-gutter);
}
.fp-surface-dark {
  background-color: var(--fp-dark-2);
  color: var(--fp-on-dark);
}
.fp-surface-dark :where(h1,h2,h3,h4,h5,h6) { color: var(--fp-on-dark); }
.fp-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-md);
}

/* ----------------------------------------------------- BUTTON SYSTEM */
/* Namespaced .fp-btn* so it never collides with Webflow's existing .link. */
.fp-btn {
  --_pad-y: .9em;
  --_pad-x: 1.65em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--fp-font-body);
  font-weight: var(--fp-w-semibold);
  font-size: var(--fp-text-sm);
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: var(--_pad-y) var(--_pad-x);
  border: 1px solid transparent;
  border-radius: var(--fp-radius-pill);
  transition:
    transform var(--fp-dur) cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--fp-dur) var(--fp-ease),
    border-color var(--fp-dur) var(--fp-ease),
    color var(--fp-dur) var(--fp-ease),
    box-shadow var(--fp-dur) var(--fp-ease);
  -webkit-tap-highlight-color: transparent;
}
.fp-btn:active { transform: scale(.97) translateY(0); }

/* Leading dot — echoes the brand's existing .dot-orange motif */
.fp-btn__dot {
  width: .42em; height: .42em;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
  flex: none;
}

/* Primary — accent fill */
.fp-btn--primary {
  background: linear-gradient(180deg, rgba(96,168,255,.96) 0%, rgba(42,132,247,.96) 55%, rgba(28,112,224,.96) 100%);
  color: #fff;
  border-color: rgba(140,194,255,.4);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 28px -12px rgba(47,139,255,.5);
}
.fp-btn--primary:hover {
  background: linear-gradient(180deg, rgba(112,178,255,1) 0%, rgba(47,139,255,1) 55%, rgba(33,120,235,1) 100%);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 18px 44px -12px rgba(47,139,255,.65),
    0 4px 14px rgba(47,139,255,.28);
}
.fp-btn--primary:active { transform: scale(.97) translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.22); }

/* Secondary — solid dark ink (premium, high contrast on light) */
.fp-btn--secondary {
  background: var(--fp-ink);
  color: var(--fp-on-dark);
}
.fp-btn--secondary:hover { background: #000; transform: translateY(-2px); box-shadow: var(--fp-shadow-md); }

/* Outline — quiet on light surfaces */
.fp-btn--outline {
  background: transparent;
  color: var(--fp-ink);
  border-color: var(--fp-line-strong);
  backdrop-filter: blur(6px);
}
.fp-btn--outline:hover { border-color: var(--fp-ink); background: var(--fp-accent-softer); }

/* Ghost — text-only with accent */
.fp-btn--ghost {
  background: transparent;
  color: var(--fp-accent-ink);
  padding-inline: .6em;
}
.fp-btn--ghost:hover { background: var(--fp-accent-soft); }

/* On-dark variants (for dark feature sections) */
.fp-surface-dark .fp-btn--outline,
.fp-btn--outline.is-on-dark {
  color: var(--fp-on-dark);
  border-color: var(--fp-line-on-dark);
}
.fp-surface-dark .fp-btn--outline:hover,
.fp-btn--outline.is-on-dark:hover { border-color: var(--fp-on-dark); background: rgba(247,245,241,.06); }

.fp-surface-dark .fp-btn--secondary,
.fp-btn--secondary.is-on-dark {
  background: var(--fp-on-dark);
  color: var(--fp-ink);
}

/* Sizes */
.fp-btn--sm { font-size: var(--fp-text-sm); --_pad-y: .7em; --_pad-x: 1.1em; }
.fp-btn--lg { font-size: var(--fp-text-lg); --_pad-y: 1.05em;  --_pad-x: 2em; }
.fp-btn--block { display: flex; width: 100%; }

/* ── Unified CTA look ───────────────────────────────────────────────
   Every button across the site reads as one of two styles, matching the hero:
   a glassy translucent pill with a white hairline border. The PRIMARY variant
   breathes a soft glow to draw the eye; the OUTLINE-on-dark variant is identical
   minus the animation. (No solid-filled buttons anywhere.) */
.fp-btn--primary,
.fp-btn--outline.is-on-dark {
  background: rgba(14,18,26,.5);
  color: var(--fp-on-dark);
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 22px -2px rgba(255,255,255,.16),
    0 12px 32px -12px rgba(0,0,0,.7);
}
.fp-btn--primary:hover,
.fp-btn--outline.is-on-dark:hover {
  background: rgba(26,30,40,.62);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 34px 0 rgba(255,255,255,.32),
    0 16px 40px -12px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .fp-btn--primary { animation: fp-btn-glow 3.2s ease-in-out infinite; }
  @keyframes fp-btn-glow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px -4px rgba(255,255,255,.14), 0 12px 32px -12px rgba(0,0,0,.7); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 30px 1px rgba(120,180,255,.45), 0 0 16px -2px rgba(255,255,255,.28), 0 12px 32px -12px rgba(0,0,0,.7); }
  }
}


/* Smooth baseline interaction for plain content links (skips .fp-btn and component-prefixed links) */
@media (prefers-reduced-motion: no-preference) {
  a:not(.fp-btn):not([class*="lp-"]):not([class*="site-"]):not([class*="rl-"]) {
    transition: opacity var(--fp-dur-fast) var(--fp-ease), color var(--fp-dur-fast) var(--fp-ease);
  }
}
a:not(.fp-btn):not([class*="lp-"]):not([class*="site-"]):not([class*="rl-"]):hover { opacity: .8; }