/*
 * MyFundedFutures (MFFU) Design Tokens
 * Derived directly from apps/futures-marketing + apps/futures-web tailwind configs.
 * Site is a dark-mode prop-trading platform. Lexend everywhere.
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&family=Urbanist:wght@400;500;600;700&display=swap');

/* Brand-uploaded fonts — prefer these over Google Fonts for matching families. */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Parisienne-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/LibreBaskerville-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/LibreBaskerville-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* -------- BRAND CORE -------- */
  --mffu-blue:       #3A82F7;  /* Primary brand blue */
  --mffu-blue-soft:  #60A5FA;  /* Accent / link hover */
  --mffu-blue-600:   #3B82F6;  /* Table gradient blue */
  --mffu-blue-ink:   #1e3a8a;  /* Deep navy */
  --mffu-cream:      #D8AE5E;  /* Primary brand gold / cream */
  --mffu-cream-deep: #403A31;  /* Dark cream wash */

  /* Fintevo sub-brand (used on /coupons, promo banners) */
  --fintevo-blue:    #A5A6FC;
  --fintevo-purple:  #6845E6;

  /* -------- SURFACES (dark) -------- */
  --bg-page:         #02040E;  /* html/body background */
  --bg-surface-1:    #0f111a;  /* elevated panel */
  --bg-surface-2:    #10121B;
  --bg-surface-3:    #111827;
  --bg-surface-4:    #1b1d26;  /* card base */
  --bg-surface-5:    #1b1d27;
  --bg-surface-6:    #21242e;  /* hovered card */
  --bg-surface-7:    #272830;
  --bg-surface-8:    #272831;
  --bg-mute:         #1C1C1C;

  /* Glassy overlays */
  --glass-white-05:  rgba(255,255,255,0.05);
  --glass-white-06:  rgba(255,255,255,0.06);
  --glass-white-08:  rgba(255,255,255,0.08);
  --glass-white-10:  rgba(255,255,255,0.10);
  --glass-white-20:  rgba(255,255,255,0.20);
  --glass-white-31:  rgba(255,255,255,0.31);
  --glass-black-60:  rgba(2, 4, 14, 0.60);

  /* -------- TEXT -------- */
  --fg-1: #FFFFFF;          /* Primary on dark */
  --fg-2: #D1D5DB;          /* Body copy (gray-300) */
  --fg-3: #9398AC;          /* Muted */
  --fg-4: #9CA3AF;          /* Meta */
  --fg-5: #828282;          /* Tertiary label */
  --fg-6: #6B7280;          /* Disabled-ish */
  --fg-inverse: #1C1C1C;    /* Text on gold/blue CTA */
  --link:    var(--mffu-blue-soft);

  /* -------- BORDERS -------- */
  --border-soft:   rgba(255,255,255,0.10);
  --border-card:   rgba(255,255,255,0.31);
  --border-divider:#4C4E50;
  --border-tint-blue: #60A5FA33;

  /* -------- SEMANTIC -------- */
  --success: #22C55E;
  --danger:  #EF4444;
  --warning: var(--mffu-cream);
  --info:    var(--mffu-blue);

  /* -------- RADII -------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 19px;   /* .bg-box uses 19.058px */
  --r-pill: 9999px;

  /* -------- SPACING SCALE (Tailwind-aligned) -------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-hero-30: 30px;
  --sp-hero-60: 60px;
  --sp-hero-230: 230px;

  /* -------- SHADOWS -------- */
  --shadow-yellow: 0 0 10px 2px rgba(216, 174, 94, 0.60);
  --shadow-blue:   0 25px 50px -12px rgba(59, 130, 246, 0.25);
  --shadow-soft:   0 4px 30px rgba(0, 0, 0, 0.10);
  --shadow-banner: 0 2px 20px 0 rgba(255, 255, 255, 0.35),
                   0 0 12.5px 0 rgba(255, 255, 255, 0.60) inset,
                   6.25px 5px 10.5px 0 rgba(255, 255, 255, 0.2),
                   12.5px 20px 100px 0 rgba(58, 130, 247, 0.80);

  /* -------- GRADIENTS -------- */
  --grad-brand:     linear-gradient(90deg, #3A82F7 0%, #D8AE5E 100%);
  --grad-brand-cta: linear-gradient(90deg, #D8AE5E 0%, #3A82F7 100%); /* button default = gold→blue */
  --grad-table:     radial-gradient(120.96% 95.18% at 50% 0%, #3B82F6 0%, rgba(59,130,246,0) 100%);
  --grad-blue-fade: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 100%);
  --grad-gold-logo: linear-gradient(135deg, #DEB25F 0%, #F3CC81 100%);

  /* -------- BLUR -------- */
  --blur-backdrop:  blur(25px);
  --blur-glass:     blur(5.6px);

  /* -------- TYPE FAMILIES -------- */
  --font-sans:     'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-urbanist: 'Urbanist', var(--font-sans);
  --font-serif:    'Libre Baskerville', Georgia, serif;
  --font-script:   'Parisienne', cursive;          /* Used on certificates */
  --font-mono:     'Lexend', 'JetBrains Mono', ui-monospace, monospace;

  /* -------- TYPE ROLES -------- */
  /* Display / hero: tight tracking, heavy weight */
  --fs-display: clamp(36px, 6vw, 72px);
  --fs-h1:      clamp(30px, 4.2vw, 60px);
  --fs-h2:      clamp(28px, 3.6vw, 48px);
  --fs-h3:      clamp(24px, 2.8vw, 36px);
  --fs-h4:      clamp(20px, 2.2vw, 28px);
  --fs-h5:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;   /* Uppercase eyebrow labels on cards */

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-loose:   1.75;
  --lh-body:    2;    /* Tailwind leading-8 = 32px @ 16px base */

  --tracking-tight: -0.02em;
  --tracking-wide:  0.12em; /* Eyebrows: uppercase + wider */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;
}

/* Semantic element defaults (optional — include in demos) */
.mffu-body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.mffu-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); }
.mffu-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); }
.mffu-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); }
.mffu-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug); color: var(--fg-1); }
.mffu-p  { font-size: var(--fs-body); color: var(--fg-2); line-height: var(--lh-body); }
.mffu-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mffu-blue-soft); }
.mffu-mono { font-family: var(--font-mono); }

/* The signature CTA */
.mffu-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 40px;
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--fg-inverse);
  background: var(--grad-brand-cta);
  transition: all 200ms ease;
  text-decoration: none;
}
.mffu-cta:hover { background: var(--grad-brand); }

/* Signature glass panel */
.mffu-glass {
  background: var(--glass-white-06);
  border: 1px solid var(--glass-white-31);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.mffu-bg-box {
  border-radius: var(--r-2xl);
  background: var(--glass-white-05);
}