/* ============================================================
   SLS / Flow-IT Design System — Shared Tokens & Base Components
   ------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, shadow
   and the handful of components (buttons, badges, cards, nav)
   reused across smartlockersolutions.de and flow-it.sk.

   Warum eine eigene Datei?
   - index.html enthält aktuell denselben Token-Block + Base64-Fonts
     inline im <style>. Jede neue Seite (wie diese Landingpage)
     würde das sonst 1:1 duplizieren müssen (~40 KB pro Seite).
   - Ändert sich ein Farbwert oder der Button-Stil, reicht künftig
     EINE Änderung hier statt N Änderungen in jeder HTML-Datei.
   - Diese Datei per <link rel="stylesheet" href="assets/css/sls-design-tokens.css">
     in index.html UND in neue Seiten einbinden.
   ============================================================ */

/* ---------- 1. FONTS ---------- */
/* Urbanist über Google Fonts statt eingebetteter Base64-Daten –
   spart ~35 KB pro Seite und wird über den Browser-Cache geteilt. */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- 2. FLOW-IT CORE TOKENS ---------- */
  --fi-blue-600:       #0055FF;
  --fi-blue-500:       #2675EE;
  --fi-blue-400:       #4A8FF3;
  --fi-blue-100:       #DCE8FF;
  --fi-blue-50:        #F0F5FF;

  --fi-cyan-500:       #00F8FF;
  --fi-cyan-400:       #6EFAFF;
  --fi-cyan-100:       #D6FCFF;

  --fi-teal-600:       #007B7F;

  --fi-ink-900:        #111315;
  --fi-ink-800:        #212226;
  --fi-ink-700:        #363737;
  --fi-ink-500:        #737373;
  --fi-ink-300:        #B5B5B5;
  --fi-ink-200:        #E7E7E7;
  --fi-ink-100:        #EAECEB;
  --fi-ink-50:         #F5F7FA;
  --fi-white:          #FFFFFF;

  --fi-link:           #0563C1;
  --fi-success:        #16A34A;
  --fi-warning:        #D97706;
  --fi-danger:         #DC2626;

  --fi-gradient-primary:    linear-gradient(315deg, var(--fi-blue-600) 0%, var(--fi-cyan-500) 100%);

  --fi-fg:             var(--fi-ink-800);
  --fi-fg-muted:       var(--fi-ink-500);
  --fi-fg-on-brand:    var(--fi-white);
  --fi-fg-brand:       var(--fi-blue-600);
  --fi-bg:             var(--fi-white);
  --fi-bg-subtle:      var(--fi-ink-50);
  --fi-bg-dark:        var(--fi-ink-800);
  --fi-border:         var(--fi-ink-200);
  --fi-border-strong:  var(--fi-ink-300);

  --fi-font-sans:      'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fi-font-display:   'Urbanist', system-ui, -apple-system, sans-serif;

  --fi-size-display:   clamp(40px, 5.6vw, 72px);
  --fi-size-h1:        clamp(32px, 4vw,   56px);
  --fi-size-h2:        clamp(26px, 3vw,   40px);
  --fi-size-h3:        clamp(20px, 2vw,   28px);
  --fi-size-h4:        18px;
  --fi-size-body-lg:   18px;
  --fi-size-body:      16px;
  --fi-size-body-sm:   14px;
  --fi-size-label:     13px;
  --fi-size-caption:   12px;

  --fi-weight-regular: 400;
  --fi-weight-medium:  500;
  --fi-weight-semi:    600;
  --fi-weight-bold:    700;
  --fi-weight-extra:   800;

  --fi-leading-tight:  1.1;
  --fi-leading-snug:   1.25;
  --fi-leading-normal: 1.5;
  --fi-leading-loose:  1.7;

  --fi-tracking-tight: -0.02em;
  --fi-tracking-normal: 0;
  --fi-tracking-label: 0.14em;
  --fi-tracking-wide:  0.06em;

  --fi-radius-sm:      6px;
  --fi-radius-md:      10px;
  --fi-radius-lg:      16px;
  --fi-radius-xl:      28px;
  --fi-radius-pill:    999px;

  --fi-space-1:        4px;
  --fi-space-2:        8px;
  --fi-space-3:        12px;
  --fi-space-4:        16px;
  --fi-space-5:        24px;
  --fi-space-6:        32px;
  --fi-space-7:        48px;
  --fi-space-8:        64px;
  --fi-space-9:        96px;
  --fi-space-10:       128px;

  --fi-shadow-xs:      0 1px 2px rgba(17, 19, 21, 0.06);
  --fi-shadow-sm:      0 2px 8px rgba(17, 19, 21, 0.06), 0 1px 3px rgba(17,19,21,0.08);
  --fi-shadow-md:      0 8px 24px rgba(17, 19, 21, 0.08), 0 2px 6px rgba(17,19,21,0.06);
  --fi-shadow-lg:      0 24px 48px rgba(17, 19, 21, 0.12), 0 8px 16px rgba(17,19,21,0.08);
  --fi-shadow-brand:   0 12px 32px rgba(0, 85, 255, 0.22);

  --fi-ease:           cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- 3. SLS BRAND OVERRIDES ---------- */
  --sls-blue:          #1E4AAE;
  --sls-blue-bright:   #2A5BC8;
  --sls-blue-deep:     #143A8C;
  --sls-navy:          #173A6E;
  --sls-orange:        #EE7A16;
  --sls-orange-btn:    #F07E1A;
  --sls-orange-dark:   #D86C0C;
  --sls-orange-soft:   #F9A14A;
  --sls-orange-tint:   #FFF3E8;
  --sls-blue-tint:     #EAF0FB;

  --sls-grad-hero:     radial-gradient(1100px 720px at 78% 16%, #2A5BCB 0%, #1E49AC 52%, #163B8E 100%);
  --sls-grad-cta:      linear-gradient(135deg, #163B8E 0%, #234FB8 100%);
  --sls-grad-orange:   linear-gradient(135deg, #F8983B 0%, #EA6E10 100%);
}

/* ---------- 4. BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fi-font-sans);
  color: var(--fi-fg);
  background: var(--fi-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
a { color: var(--fi-link); }
.sls-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---------- 5. TYPE HELPERS ---------- */
.sls-eyebrow {
  font-size: var(--fi-size-label);
  font-weight: var(--fi-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--fi-tracking-label);
  color: var(--sls-orange);
}
.sls-h1, .sls-h2 {
  font-family: var(--fi-font-display);
  font-weight: var(--fi-weight-extra);
  letter-spacing: var(--fi-tracking-tight);
  color: var(--sls-navy);
  margin: 0;
}
.sls-h1 { font-size: var(--fi-size-h1); line-height: var(--fi-leading-tight); }
.sls-h2 { font-size: var(--fi-size-h2); line-height: var(--fi-leading-tight); }
.sls-lede {
  font-size: var(--fi-size-body-lg);
  line-height: var(--fi-leading-normal);
  color: var(--fi-fg-muted);
}

/* ---------- 6. BUTTONS ---------- */
.sls-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fi-weight-semi);
  font-size: var(--fi-size-body);
  padding: 16px 28px;
  border-radius: var(--fi-radius-md);
  border: none;
  cursor: pointer;
  transition: all 200ms var(--fi-ease);
  text-decoration: none;
}
.sls-btn-primary {
  background: var(--sls-orange-btn);
  color: var(--fi-white);
  box-shadow: 0 14px 34px rgba(240, 126, 26, 0.42);
}
.sls-btn-primary:hover { background: var(--sls-orange-dark); transform: translateY(-2px); }
.sls-btn-primary:focus-visible { outline: 3px solid var(--sls-blue); outline-offset: 2px; }

/* ---------- 7. CARDS / PANELS ---------- */
.sls-card {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-lg);
  box-shadow: var(--fi-shadow-sm);
}
.sls-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fi-size-caption);
  font-weight: var(--fi-weight-semi);
  color: var(--sls-blue);
  background: var(--sls-blue-tint);
  border-radius: var(--fi-radius-sm);
  padding: 4px 10px;
}

/* ---------- 8. FORM ELEMENTS ---------- */
.sls-field label {
  display: block;
  font-size: var(--fi-size-caption);
  font-weight: var(--fi-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--fi-tracking-wide);
  color: var(--fi-fg-muted);
  margin-bottom: 6px;
}
.sls-field input[type="text"],
.sls-field input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--fi-font-sans);
  font-size: var(--fi-size-body);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-md);
  background: var(--fi-bg-subtle);
  color: var(--fi-fg);
}
.sls-field input:focus {
  outline: 2px solid var(--sls-blue);
  outline-offset: 1px;
  border-color: var(--sls-blue);
}