/* ============================================================
   LOGIKFUSION DESIGN TOKENS
   KI. Einfach. Für dich.
   ============================================================ */

/* ---------- BRAND FONTS (self-hosted) ---------- */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Fira Code is not part of the uploaded brand font bundle — kept on Google Fonts
   for monospaced specimens. Swap to a self-hosted file when available. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary blues — Vertrauen, Autorität, Kompetenz */
  --lf-blue:         #2563EB;   /* Primary 60% — CTAs, headlines, banners */
  --lf-blue-deep:    #1E40AF;   /* Gradient end, hover state */
  --lf-blue-light:   #3B82F6;   /* Highlights, tags on dark */
  --lf-blue-pale:    #EFF6FF;   /* Tinted backgrounds */
  --lf-blue-glow:    #93C5FD;   /* Background accents only, never text */

  /* Power accent — Komplementär zu Blau */
  --lf-yellow:       #FACC15;   /* Power Words, bullets, highlights — 10% */
  --lf-yellow-pale:  #FEF9C3;

  /* Premium dark — optional Hintergrund */
  --lf-dark:         #0D0F14;   /* Haupthintergrund Premium */
  --lf-navy:         #111827;   /* Sekundärer dunkler Ton */

  /* Success / CTA on dark */
  --lf-green:        #10B981;   /* Haupt-CTA-Button auf dunklem Grund */
  --lf-green-pale:   #ECFDF5;

  /* Warning — sparsam */
  --lf-red:          #EF4444;   /* Nur Fehler, nie Designelement */

  /* Neutrals */
  --lf-white:        #FFFFFF;
  --lf-gray-50:      #F9FAFB;
  --lf-gray-100:     #F3F4F6;
  --lf-gray-200:     #E5E7EB;
  --lf-gray-300:     #D1D5DB;
  --lf-gray-400:     #9CA3AF;
  --lf-gray-500:     #6B7280;
  --lf-gray-600:     #4B5563;
  --lf-gray-700:     #374151;
  --lf-gray-800:     #1F2937;
  --lf-gray-900:     #111827;

  /* ---------- SEMANTIC COLORS ---------- */
  --bg-page:         var(--lf-white);
  --bg-elevated:     var(--lf-white);
  --bg-muted:        var(--lf-gray-50);
  --bg-inverse:      var(--lf-dark);
  --bg-brand:        var(--lf-blue);

  --fg-1:            var(--lf-gray-900);  /* Headlines */
  --fg-2:            var(--lf-gray-700);  /* Body */
  --fg-3:            var(--lf-gray-500);  /* Muted / labels */
  --fg-4:            var(--lf-gray-400);  /* Disabled, captions */
  --fg-on-brand:     #FFFFFF;
  --fg-on-dark:      #F9FAFB;
  --fg-power:        var(--lf-yellow);    /* Power Words on blue/dark */
  --fg-link:         var(--lf-blue);
  --fg-success:      var(--lf-green);
  --fg-danger:       var(--lf-red);

  --border-1:        var(--lf-gray-200);
  --border-2:        var(--lf-gray-300);
  --border-dark:     rgba(255,255,255,0.10);

  /* ---------- GRADIENTS ---------- */
  --gradient-blue:   linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  --gradient-blue-soft: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-dark:   linear-gradient(135deg, #111827 0%, #0D0F14 100%);

  /* Blueprint pattern — technical drawing paper. Base blue with a fine
     16px grid and a coarse 80px grid, plus a soft center glow. Use the
     `.lf-blueprint` utility class (defined below) for the full effect. */
  --blueprint-base:      #1f6fdb;
  --blueprint-line-fine: rgba(186, 224, 255, 0.18);
  --blueprint-line-bold: rgba(186, 224, 255, 0.38);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'Fira Code', 'SF Mono', Menlo, monospace;

  /* Font sizes — modular scale */
  --text-xs:         0.75rem;    /* 12px — micro labels */
  --text-sm:         0.875rem;   /* 14px — captions */
  --text-base:       1rem;       /* 16px — body default */
  --text-lg:         1.125rem;   /* 18px — lead paragraph */
  --text-xl:         1.25rem;    /* 20px — H3 */
  --text-2xl:        1.5rem;     /* 24px — H2 small */
  --text-3xl:        1.875rem;   /* 30px — H2 */
  --text-4xl:        2.25rem;    /* 36px — H1 */
  --text-5xl:        3rem;       /* 48px — Hero small */
  --text-6xl:        3.75rem;    /* 60px — Hero */
  --text-7xl:        4.5rem;     /* 72px — Banner */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.12em;     /* eyebrow labels */

  /* ---------- SPACING (4px base) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   12px;     /* default card */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Subtle, B2B-trustworthy. No coloured glows except brand-blue lift. */
  --shadow-xs:   0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:   0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:   0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:   0 12px 32px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.05);
  --shadow-xl:   0 24px 60px rgba(15,23,42,0.14);
  --shadow-blue: 0 8px 24px rgba(37,99,235,0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-1:   120ms;
  --duration-2:   200ms;
  --duration-3:   320ms;
  --duration-4:   500ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-narrow: 880px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Mix-in classes for design-system consistency
   ============================================================ */

.lf-display {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.lf-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.lf-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.lf-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.lf-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.lf-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.lf-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.lf-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-4);
}

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

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

.lf-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--lf-gray-100);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--lf-gray-800);
}

/* Power Word — yellow on blue/dark backgrounds */
.lf-power {
  color: var(--lf-yellow);
  font-weight: 700;
}

/* ============================================================
   BLUEPRINT BACKGROUND
   Technical drawing paper — layered grid + center glow.
   Apply to any element that previously used --gradient-blue.
   ============================================================ */
.lf-blueprint {
  background-color: var(--blueprint-base);
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18), transparent 65%),
    linear-gradient(var(--blueprint-line-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line-bold) 1px, transparent 1px),
    linear-gradient(var(--blueprint-line-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line-fine) 1px, transparent 1px);
  background-size:
    100% 100%,
    80px 80px,
    80px 80px,
    16px 16px,
    16px 16px;
  background-position: center, 0 0, 0 0, 0 0, 0 0;
}