/* ============================================================
   N8N Agentur — Colors & Type tokens
   Tech-confident · serious · German B2B · premium positioning
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800;900&display=swap');

:root {
  /* ---------- COLOR — INK / BASE (deep, calm, technical) ---------- */
  --ink-1000: #05070A;     /* near-black, deepest bg / hero */
  --ink-900:  #0B0F14;     /* primary dark bg */
  --ink-800:  #11161D;     /* surface dark */
  --ink-700:  #1A2029;     /* card on dark */
  --ink-600:  #252D38;     /* hairline / divider on dark */
  --ink-500:  #3A4452;     /* muted dark fg */
  --ink-400:  #5C6878;     /* meta / caption on dark */
  --ink-300:  #8A95A4;     /* secondary text on dark */
  --ink-200:  #BDC5D1;     /* tertiary text */
  --ink-100:  #E4E8EE;     /* near-white text on dark */
  --ink-0:    #FFFFFF;

  /* ---------- COLOR — PAPER (light surfaces) ---------- */
  --paper-0:  #FFFFFF;
  --paper-50: #F7F8FA;     /* page bg light mode */
  --paper-100:#EEF1F5;     /* card bg light */
  --paper-200:#E1E6ED;     /* divider light */
  --paper-300:#C8D0DA;
  --paper-400:#9BA5B3;

  /* ---------- COLOR — SIGNAL (the one accent — electric cyan) ---------- */
  /* Switched from lime (already used at lazylabor.de) to a distinct tech-cyan. */
  /* Reads as "node graph / circuit trace" without overlapping the lazylabor lime. */
  --signal:        #00E5FF;     /* electric cyan, primary accent */
  --signal-bright: #6FF1FF;     /* hover */
  --signal-deep:   #008CA8;     /* pressed / on-light */
  --signal-ink:    #001E26;     /* text on signal */
  --signal-glow:   #00E5FF66;   /* 40% — for outer glows on dark only */

  /* ---------- COLOR — SEMANTIC ---------- */
  --ok:       #22C55E;
  --ok-soft:  #DCFCE7;
  --warn:     #F59E0B;
  --warn-soft:#FEF3C7;
  --error:    #EF4444;
  --error-soft:#FEE2E2;
  --info:     #38BDF8;

  /* ---------- FOREGROUND aliases (semantic) ---------- */
  --fg-primary:    var(--ink-1000);
  --fg-secondary:  var(--ink-500);
  --fg-tertiary:   var(--ink-400);
  --fg-on-dark:    var(--ink-100);
  --fg-on-dark-2:  var(--ink-300);
  --fg-on-signal:  var(--signal-ink);

  /* ---------- BACKGROUND aliases ---------- */
  --bg-page:       var(--paper-50);
  --bg-surface:    var(--paper-0);
  --bg-elevated:   var(--paper-0);
  --bg-dark:       var(--ink-900);
  --bg-darker:     var(--ink-1000);
  --bg-card-dark:  var(--ink-800);

  /* ---------- BORDER aliases ---------- */
  --border-soft:   var(--paper-200);
  --border-strong: var(--paper-300);
  --border-on-dark:var(--ink-600);

  /* ============================================================
     TYPE SYSTEM
     - Display: Orbitron — for the logo-adjacent stencil/tech moments
       only. Use sparingly (eyebrows, callouts, numerals in stats).
     - Heading + body: Space Grotesk — geometric, German-friendly,
       confident, not Inter-generic.
     - Mono: JetBrains Mono — code, labels, workflow node UI, keys.
     ============================================================ */

  --font-display: 'Orbitron', 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — 1.250 (Major Third) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;
  --fs-7xl:  96px;     /* hero on large screens */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.35;
  --lh-relaxed: 1.55;
  --lh-loose:   1.7;

  /* Letter-spacing */
  --ls-tightest: -0.04em;
  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.12em;     /* eyebrows, all-caps tags */
  --ls-widest:    0.22em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;
  --sp-14: 160px;

  /* Section rhythm */
  --section-y:    96px;
  --section-y-lg: 128px;
  --container-x:  clamp(20px, 5vw, 64px);
  --max-w:        1240px;
  --max-w-text:   720px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill:9999px;

  /* ============================================================
     BORDERS
     ============================================================ */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* ============================================================
     SHADOWS — restrained; tech sites don't oversell
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(5,7,10,0.04), 0 0 0 1px rgba(5,7,10,0.04);
  --shadow-sm: 0 2px 6px rgba(5,7,10,0.06), 0 0 0 1px rgba(5,7,10,0.04);
  --shadow-md: 0 8px 24px rgba(5,7,10,0.08), 0 0 0 1px rgba(5,7,10,0.04);
  --shadow-lg: 0 18px 48px rgba(5,7,10,0.12), 0 2px 6px rgba(5,7,10,0.06);
  --shadow-glow: 0 0 0 1px var(--signal), 0 0 32px var(--signal-glow);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-on-dark);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============================================================
     LAYOUT — grid trace background (n8n-graph nod)
     ============================================================ */
  --grid-line: rgba(255,255,255,0.04);
  --grid-line-light: rgba(5,7,10,0.05);
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.18);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 4vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
  font-weight: var(--fw-regular);
}

.meta, small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-tertiary);
  line-height: var(--lh-normal);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.display-stencil {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

/* Tag / pill labels */
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--paper-100);
  color: var(--fg-primary);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag--signal { background: var(--signal); color: var(--signal-ink); border-color: transparent; }
.tag--dark   { background: var(--ink-800); color: var(--ink-100); border-color: var(--ink-600); }