/* ═══════════════════════════════════════════════════════════
   FLUBB BRAND TOKENS — V7 Guideline
   Single source of truth for all design values
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'F37 Moon';
  src: url('../assets/fonts/F37Moon-Regular.woff2') format('woff2'),
       url('../assets/fonts/F37Moon-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'F37 Moon';
  src: url('../assets/fonts/F37Moon-Demi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'F37 Moon';
  src: url('../assets/fonts/F37Moon-Bold.woff2') format('woff2'),
       url('../assets/fonts/F37Moon-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Typography ──────────────────────────────────── */
  --f-font: 'F37 Moon', sans-serif;

  --f-weight-regular: 400;
  --f-weight-demi:    600;
  --f-weight-bold:    700;

  --f-h1:   clamp(2.4rem, 4vw, 4rem);
  --f-h2:   clamp(1.75rem, 3.2vw, 2.8rem);
  --f-h3:   clamp(1.2rem, 2vw, 1.6rem);
  --f-body: 1rem;
  --f-small: 0.875rem;
  --f-xs:    0.75rem;

  /* ── Primary Colors (V7 p14) ─────────────────────── */
  --f-black:         #000000;
  --f-white:         #FFFFFF;
  --f-white-smoke:   #F4F5F7;
  --f-purple:        #7444F2;
  --f-purple-deep:   #5830D4;
  --f-blue:          #010118;
  --f-navy:          #0D192B;

  /* ── Secondary Colors (V7 p15) ───────────────────── */
  --f-yellow:        #EED986;
  --f-lavender:      #BEC8F9;
  --f-support-1:     #0D192B;
  --f-support-2:     #D3ABFC;
  --f-accent:        #7444F2;

  /* ── Semantic Tokens ─────────────────────────────── */
  --f-text-heading:  #4B5563;
  --f-text-body:     #4B5563;
  --f-text-muted:    #6B7280;
  --f-text-light:    #9A96AA;
  --f-text-on-dark:  #FFFFFF;

  --f-bg-page:       #FFFFFF;
  --f-bg-soft:       #F3F0FF;
  --f-bg-card:       #FFFFFF;
  --f-bg-dark:       #0D192B;

  --f-border:        rgba(116, 68, 242, 0.15);
  --f-border-strong: rgba(116, 68, 242, 0.35);
  --f-shadow-sm:     0 2px 8px rgba(116, 68, 242, 0.06);
  --f-shadow-md:     0 4px 20px rgba(116, 68, 242, 0.15);
  --f-shadow-lg:     0 8px 40px rgba(116, 68, 242, 0.22);

  /* ── Layout ──────────────────────────────────────── */
  --f-container:     1100px;
  --f-section-pad:   clamp(48px, 8vw, 100px);
  --f-side-pad:      clamp(20px, 4vw, 60px);

  /* ── Radius ──────────────────────────────────────── */
  --f-radius-sm:     12px;
  --f-radius-md:     20px;
  --f-radius-lg:     32px;
  --f-radius-pill:   100px;

  /* ── Transitions ─────────────────────────────────── */
  --f-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --f-duration:      0.3s;
}