/* ============================================================
   FLY CAPE TOWN — Colors & Type Foundations
   Tandem paragliding · Cape Town, South Africa
   ------------------------------------------------------------
   Palette sourced from the brand swatch sheet (ocean/sky range)
   + the logo's electric cyan. Mood: adrenaline & bold.

   FONTS: The wordmark uses custom rounded-bold lettering
   ("Fly Cape Town") + a heavy geometric caps ("PARAGLiDING").
   Exact fonts unknown — these are the closest Google Fonts
   matches and are FLAGGED for the user to confirm:
     • Archivo  -> heavy, punchy display (echoes "PARAGLiDING")
     • Hanken Grotesk -> clean, modern body
     • Baloo 2  -> rounded brand-accent (echoes "Fly Cape Town")
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Hanken+Grotesk:wght@400..800&family=Baloo+2:wght@500..800&display=swap');

:root {
  /* ---- Brand core (from logo + swatch sheet) ---- */
  --fct-cyan-electric: #2FC1D3; /* sampled from logo glyphs */
  --fct-cyan:          #129FC0; /* swatch #7 — vibrant brand blue */
  --fct-teal-deep:     #0C7CA4; /* swatch #4 — deep teal */
  --fct-blue-steel:    #719FAF; /* swatch #3 — muted sky-steel */
  --fct-navy:          #1B4664; /* swatch #5 — deep ocean */
  --fct-ink:           #02081C; /* swatch #6 — near-black night sky */
  --fct-grey:          #C5CAC9; /* swatch #2 — cool grey */
  --fct-grey-pale:     #D4DEDF; /* swatch #1 — pale mist */
  --fct-white:         #FFFFFF;

  /* ---- Extended ramp (oklch-harmonised tints/shades) ---- */
  --fct-cyan-050: #E6F7FA;
  --fct-cyan-100: #C2ECF3;
  --fct-cyan-200: #8FDDEB;
  --fct-cyan-300: #57CCDF;
  --fct-cyan-400: #2FC1D3; /* electric */
  --fct-cyan-500: #129FC0; /* brand */
  --fct-cyan-600: #0C7CA4; /* teal-deep */
  --fct-cyan-700: #0B5E7E;
  --fct-cyan-800: #103F58;
  --fct-cyan-900: #102A3D;

  --fct-ink-900: #02081C;
  --fct-ink-800: #081227;
  --fct-ink-700: #0E2036;
  --fct-ink-600: #1B4664; /* navy */
  --fct-ink-500: #2C5A7C;

  --fct-neutral-050: #F5F7F8;
  --fct-neutral-100: #ECEFF0;
  --fct-neutral-200: #D4DEDF;
  --fct-neutral-300: #C5CAC9;
  --fct-neutral-400: #9AA6A8;
  --fct-neutral-500: #6E7A7D;
  --fct-neutral-600: #4A5557;

  /* ---- Semantic: surfaces ---- */
  --bg:            #FFFFFF;
  --bg-subtle:     #F5F7F8;
  --bg-muted:      #ECEFF0;
  --bg-ink:        #02081C; /* dark hero / night sky sections */
  --bg-ink-soft:   #0E2036;
  --surface:       #FFFFFF;
  --surface-raised:#FFFFFF;

  /* ---- Semantic: text ---- */
  --fg1: #02081C; /* primary ink */
  --fg2: #1B4664; /* secondary navy */
  --fg3: #6E7A7D; /* muted */
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-soft:   #B9C6CC;
  --fg-on-dark-muted:  #8597A0;

  /* ---- Semantic: brand / action ---- */
  --primary:        #129FC0; /* brand cyan — primary actions */
  --primary-hover:  #0C7CA4; /* darken on hover */
  --primary-press:  #0B5E7E; /* press = deeper */
  --primary-on:     #FFFFFF;
  --accent:         #2FC1D3; /* electric — glows, highlights, energy */
  --link:           #0C7CA4;

  /* ---- Borders & lines ---- */
  --border:         #E2E7E8;
  --border-strong:  #C5CAC9;
  --border-on-dark: rgba(255,255,255,0.14);

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows (cool-tinted, lifted) ---- */
  --shadow-xs: 0 1px 2px rgba(2,8,28,0.06);
  --shadow-sm: 0 2px 8px rgba(2,8,28,0.08);
  --shadow-md: 0 8px 24px rgba(2,8,28,0.10);
  --shadow-lg: 0 18px 48px rgba(2,8,28,0.16);
  --shadow-cyan: 0 12px 32px rgba(18,159,192,0.32); /* glow under CTAs */

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Type families ---- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-rounded: 'Baloo 2', system-ui, sans-serif; /* brand-accent, echoes wordmark */

  /* ---- Fluid type scale ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-6xl:  5.5rem;    /* 88px */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em; /* eyebrows / labels */
}

/* ============================================================
   SEMANTIC TYPE — apply to elements directly
   ============================================================ */

.fct-display,
.fct-h0 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 7vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-stretch: 125%; /* Archivo supports expanded width */
  text-transform: uppercase;
  color: var(--fg1);
}

.fct-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, var(--text-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.fct-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.fct-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

.fct-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

/* Eyebrow / kicker — wide tracked caps, the brand's signature label style */
.fct-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--primary);
}

.fct-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}

.fct-body,
p.fct {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}

.fct-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg3);
}

.fct-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg3);
}

/* Price / stat numerals — heavy display */
.fct-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--primary);
}


/* ============================================================
   SUNSET PALETTE — baked in for production
   (equivalent to theme.jsx applyTheme('sunset'); theme engine
    + live tweaks panel removed for the public site)
   + readability: fg3 darkened to AA, link set AA-safe on white
   ============================================================ */
:root{
  --fg2:#2F4B57;
  --fg3:#4C656C;                 /* AA on white 6.2:1 (was #56737B) */
  --fct-navy:#2F4B57;
  --fct-cyan-050:#FFF1E6; --fct-cyan-100:#FFE0C7; --fct-cyan-200:#FBC79B;
  --fct-cyan-300:#FB8A4A; --fct-cyan-400:#FB5204; --fct-cyan-500:#FB5204;
  --fct-cyan-600:#B3190A; --fct-cyan-700:#8F140A;
  --cta-scrim-tint:rgba(28,49,34,.78);
  --primary:#FB5204;
  --primary-hover:#D34503;
  --primary-press:#B03903;
  --primary-on:#ffffff;
  --link:#B03903;                /* AA on white 6.1:1 — eyebrows/roles/links */
  --accent:#FBC702;
  --shadow-cyan:0 12px 32px rgba(251,82,4,.32);
  --bg-ink:#0E150E;
  --bg-ink-soft:#2B312B;
  --fg1:#0E150E;
}