/* ============================================================
   FlyLokal — Design System Foundations
   Colors + Typography tokens (base + semantic)
   Brand color: #DD1C1C
   ------------------------------------------------------------
   Brand fonts are self-hosted from fonts/ (user-provided).
   Display : Manrope        (geometric, heavy 800 — matches wordmark)
   Body/UI : Geist          (clean neutral grotesque, variable)
   Mono    : Geist Mono     (flight codes, confirmations, PNRs — Google CDN)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- Self-hosted brand fonts ---- */
@font-face { font-family:"Geist"; src:url('fonts/Geist-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url('fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Manrope"; src:url('fonts/Manrope-Medium.woff2') format('woff2'),url('fonts/Manrope-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Manrope"; src:url('fonts/Manrope-SemiBold.woff2') format('woff2'),url('fonts/Manrope-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Manrope"; src:url('fonts/Manrope-Bold.woff2') format('woff2'),url('fonts/Manrope-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Manrope"; src:url('fonts/Manrope-ExtraBold.woff2') format('woff2'),url('fonts/Manrope-ExtraBold.woff') format('woff'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Krona One"; src:url('fonts/KronaOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* ---------- BRAND ---------- */
  --fl-red:            #DD1C1C;  /* primary brand red */
  --fl-red-hover:      #C21717;  /* hover — darker */
  --fl-red-press:      #A41212;  /* active/press — darker still */
  --fl-red-soft:       #FBE3E3;  /* tint background */
  --fl-red-soft-2:     #FDF0F0;  /* faintest tint */
  --fl-red-ring:       rgba(221, 28, 28, 0.32); /* focus ring */

  /* ---------- INK / NEUTRALS ---------- */
  --fl-ink:            #161616;  /* primary text, near-black */
  --fl-ink-900:        #161616;
  --fl-ink-800:        #2B2B2B;
  --fl-ink-700:        #3D3D3D;  /* strong secondary text */
  --fl-ink-600:        #585858;
  --fl-ink-500:        #767676;  /* muted text / placeholders */
  --fl-ink-400:        #9A9A9A;
  --fl-ink-300:        #C7C7C7;  /* borders (strong) */
  --fl-ink-200:        #E4E4E4;  /* borders (default) */
  --fl-ink-150:        #EDEDED;  /* dividers */
  --fl-ink-100:        #F4F4F4;  /* subtle fill */
  --fl-ink-50:         #FAFAFA;  /* app background */
  --fl-white:          #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --fl-success:        #1A8F52;  /* confirmed, free cancellation */
  --fl-success-soft:   #E4F4EB;
  --fl-warning:        #C9821A;  /* low availability, alerts */
  --fl-warning-soft:   #FBF0DD;
  --fl-info:           #1F6FD6;  /* informational, links in context */
  --fl-info-soft:      #E7F0FC;
  --fl-danger:         #8E1620;  /* errors — deep oxblood, distinct from bright brand red */
  --fl-danger-soft:    #F7E5E6;
  --fl-deal:           #C21717;  /* price drops / deals use brand red */

  /* ---------- SURFACES ---------- */
  --fl-bg:             var(--fl-ink-50);
  --fl-surface:        var(--fl-white);
  --fl-surface-alt:    var(--fl-ink-100);
  --fl-overlay:        rgba(22, 22, 22, 0.55); /* modal scrim */

  /* ---------- TYPE FAMILIES ---------- */
  --fl-font-display: "Manrope", "Geist", system-ui, sans-serif;
  --fl-font-headline:"Inter", "Manrope", system-ui, sans-serif; /* brand headline / hero display */
  --fl-font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (px / line-height / weight / tracking) ---------- */
  /* Display — heavy weight, tight tracking */
  --fl-display-size:   60px;     /* @kind font */
  --fl-display-lh:     1.02;     /* @kind font */
  --fl-display-wt:     800;      /* @kind font */
  --fl-display-ls:     -0.02em;  /* @kind font */
  --fl-h1-size:        44px;     /* @kind font */
  --fl-h1-lh:          1.06;     /* @kind font */
  --fl-h1-wt:          500;      /* @kind font */
  --fl-h1-ls:          -0.02em;  /* @kind font */
  --fl-h2-size:        32px;     /* @kind font */
  --fl-h2-lh:          1.10;     /* @kind font */
  --fl-h2-wt:          500;      /* @kind font */
  --fl-h2-ls:          -0.015em; /* @kind font */
  --fl-h3-size:        24px;     /* @kind font */
  --fl-h3-lh:          1.18;     /* @kind font */
  --fl-h3-wt:          500;      /* @kind font */
  --fl-h3-ls:          -0.01em;  /* @kind font */
  --fl-h4-size:        19px;     /* @kind font */
  --fl-h4-lh:          1.30;     /* @kind font */
  --fl-h4-wt:          400;      /* @kind font */
  --fl-h4-ls:          -0.005em; /* @kind font */
  /* Body */
  --fl-lead-size:      19px;     /* @kind font */
  --fl-lead-lh:        1.55;     /* @kind font */
  --fl-lead-wt:        400;      /* @kind font */
  --fl-body-size:      16px;     /* @kind font */
  --fl-body-lh:        1.55;     /* @kind font */
  --fl-body-wt:        400;      /* @kind font */
  --fl-small-size:     14px;     /* @kind font */
  --fl-small-lh:       1.50;     /* @kind font */
  --fl-small-wt:       400;      /* @kind font */
  --fl-caption-size:   12.5px;   /* @kind font */
  --fl-caption-lh:     1.40;     /* @kind font */
  --fl-caption-wt:     500;      /* @kind font */
  /* Overline / eyebrow — uppercase label */
  --fl-overline-size:  12px;     /* @kind font */
  --fl-overline-lh:    1.20;     /* @kind font */
  --fl-overline-wt:    700;      /* @kind font */
  --fl-overline-ls:    0.12em;   /* @kind font */
  /* Mono — codes */
  --fl-code-size:      14px;     /* @kind font */
  --fl-code-lh:        1.40;     /* @kind font */
  --fl-code-wt:        500;      /* @kind font */
  --fl-code-ls:        0.02em;   /* @kind font */

  /* ---------- SPACING (4px base) ---------- */
  --fl-space-1:  4px;
  --fl-space-2:  8px;
  --fl-space-3:  12px;
  --fl-space-4:  16px;
  --fl-space-5:  20px;
  --fl-space-6:  24px;
  --fl-space-8:  32px;
  --fl-space-10: 40px;
  --fl-space-12: 48px;
  --fl-space-16: 64px;
  --fl-space-20: 80px;
  --fl-space-24: 96px;

  /* ---------- RADII ---------- */
  --fl-radius-xs:   6px;
  --fl-radius-sm:   8px;
  --fl-radius-md:   12px;   /* default control / input */
  --fl-radius-lg:   16px;   /* cards */
  --fl-radius-xl:   24px;   /* hero panels, modals */
  --fl-radius-2xl:  32px;
  --fl-radius-pill: 999px;  /* chips, pills, primary CTA option */

  /* ---------- SHADOWS (soft, layered) ---------- */
  --fl-shadow-xs:  0 1px 2px rgba(22,22,22,0.06);
  --fl-shadow-sm:  0 1px 3px rgba(22,22,22,0.08), 0 1px 2px rgba(22,22,22,0.04);
  --fl-shadow-md:  0 4px 12px rgba(22,22,22,0.08), 0 2px 4px rgba(22,22,22,0.04);
  --fl-shadow-lg:  0 12px 28px rgba(22,22,22,0.12), 0 4px 8px rgba(22,22,22,0.05);
  --fl-shadow-xl:  0 24px 56px rgba(22,22,22,0.16), 0 8px 16px rgba(22,22,22,0.06);
  --fl-shadow-red: 0 8px 22px rgba(221,28,28,0.28); /* lifted primary CTA */

  /* ---------- MOTION ---------- */
  --fl-ease:        cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --fl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --fl-dur-fast:    120ms;  /* @kind other */
  --fl-dur:         200ms;  /* @kind other */
  --fl-dur-slow:    320ms;  /* @kind other */

  /* ---------- LAYOUT ---------- */
  --fl-container:   1200px;  /* @kind spacing */
  --fl-gutter:      24px;    /* @kind spacing */
  --fl-border:      1px solid var(--fl-ink-200);  /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly to elements
   ============================================================ */
.fl-display {
  font-family: var(--fl-font-headline);
  font-size: var(--fl-display-size); line-height: 1.08;
  font-weight: 500; letter-spacing: -0.01em;
  color: var(--fl-ink); margin: 0;
}
.fl-h1 { font-family: var(--fl-font-display); font-size: var(--fl-h1-size); line-height: var(--fl-h1-lh); font-weight: var(--fl-h1-wt); letter-spacing: var(--fl-h1-ls); color: var(--fl-ink); margin: 0; }
.fl-h2 { font-family: var(--fl-font-display); font-size: var(--fl-h2-size); line-height: var(--fl-h2-lh); font-weight: var(--fl-h2-wt); letter-spacing: var(--fl-h2-ls); color: var(--fl-ink); margin: 0; }
.fl-h3 { font-family: var(--fl-font-display); font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh); font-weight: var(--fl-h3-wt); letter-spacing: var(--fl-h3-ls); color: var(--fl-ink); margin: 0; }
.fl-h4 { font-family: var(--fl-font-body); font-size: var(--fl-h4-size); line-height: var(--fl-h4-lh); font-weight: var(--fl-h4-wt); letter-spacing: var(--fl-h4-ls); color: var(--fl-ink); margin: 0; }
.fl-lead { font-family: var(--fl-font-body); font-size: var(--fl-lead-size); line-height: var(--fl-lead-lh); font-weight: var(--fl-lead-wt); color: var(--fl-ink-700); margin: 0; }
.fl-body { font-family: var(--fl-font-body); font-size: var(--fl-body-size); line-height: var(--fl-body-lh); font-weight: var(--fl-body-wt); color: var(--fl-ink-800); margin: 0; }
.fl-small { font-family: var(--fl-font-body); font-size: var(--fl-small-size); line-height: var(--fl-small-lh); font-weight: var(--fl-small-wt); color: var(--fl-ink-600); margin: 0; }
.fl-caption { font-family: var(--fl-font-body); font-size: var(--fl-caption-size); line-height: var(--fl-caption-lh); font-weight: var(--fl-caption-wt); color: var(--fl-ink-500); margin: 0; }
.fl-overline {
  font-family: var(--fl-font-body);
  font-size: var(--fl-overline-size); line-height: var(--fl-overline-lh);
  font-weight: var(--fl-overline-wt); letter-spacing: var(--fl-overline-ls);
  text-transform: uppercase; color: var(--fl-red); margin: 0;
}
.fl-code {
  font-family: var(--fl-font-mono);
  font-size: var(--fl-code-size); line-height: var(--fl-code-lh);
  font-weight: var(--fl-code-wt); letter-spacing: var(--fl-code-ls);
  color: var(--fl-ink); font-variant-numeric: tabular-nums;
}