/* H&H Logistics – Theme Tokens
   Industrial Precision: helles, ruhiges Operations-Theme
   Markenfarben aus dem Logo: Blau #1B4F9E, Rot #DC1F26
   Variablennamen sind kompatibel mit den vorhandenen JS-Inline-Styles
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Markenfarben H&H Logistics ───────────────────── */
  --hh-blue:        #1B4F9E;
  --hh-blue-600:    #143A75;
  --hh-blue-50:     #E8EFF8;
  --hh-red:         #DC1F26;
  --hh-red-600:     #B0181D;
  --hh-red-50:      #FCE8E9;

  /* ── Surfaces (Light) ─────────────────────────────── */
  --bg0:  #EEF2F7;        /* Body / Map-Backstop */
  --bg1:  #FFFFFF;        /* Sidebars, Topbar */
  --bg2:  #F7F9FC;        /* Modals */
  --bg3:  #F4F6FA;        /* Datenkacheln (Inset) */
  --bg4:  #E8ECF3;        /* Hover */

  /* ── Hairlines & Tiefen ───────────────────────────── */
  --border:        #E1E6EE;
  --border-strong: #C9D2E0;
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md:     0 4px 14px rgba(15, 23, 42, .06);
  --shadow-lg:     0 18px 40px rgba(15, 23, 42, .12);
  --ring:          0 0 0 3px rgba(27, 79, 158, .18);

  /* ── Text ─────────────────────────────────────────── */
  --text1: #0B1B33;
  --text2: #475569;
  --text3: #8A93A4;

  /* ── Status (Bright = Vordergrund, -d = Hintergrund-Tint) ── */
  --green:    #16A34A;  --green-d:    #E2F6EA;
  --blue:     #1B4F9E;  --blue-d:     #E8EFF8;   /* gleich Markenblau */
  --orange:   #EA580C;  --orange-d:   #FDEFE2;
  --red:      #DC1F26;  --red-d:      #FCE8E9;   /* gleich Markenrot */
  --purple:   #7C3AED;  --purple-d:   #EFE6FB;
  --cyan:     #0891B2;  --cyan-d:     #DDF4F9;
  --yellow:   #CA8A04;  --yellow-d:   #FAEFCE;
  --mint:     #059669;  --mint-d:     #D6F4E6;

  /* ── Typography ───────────────────────────────────── */
  --font-ui:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Radien (zurückhaltend, industriell) ──────────── */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;

  /* ── Layout ───────────────────────────────────────── */
  --topbar-h:    62px;
  --accent-h:    3px;
  --left-w:      308px;
  --right-w:     480px;
}

/* ── Reset ──────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: var(--bg0);
  color: var(--text1);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

a { color: var(--hh-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Scrollbars (subtil) ─────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C9D2E0;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #93A0B5; background-clip: padding-box; border: 2px solid transparent; }

/* ── Selection ──────────────────────────────────────── */
::selection {
  background: rgba(27, 79, 158, .18);
  color: var(--text1);
}

/* ── Focus Rings ────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-2);
}

/* ── Utility: Pulse für Live-Indikatoren ──────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@keyframes liveBlink {
  0%, 70% { opacity: 1; }
  85%, 100% { opacity: .35; }
}

/* ── Spacing scale (Design-System) ──────────────────── */
:root {
  --s-1:  4px;
  --s-2:  6px;
  --s-3:  8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 18px;
  --s-8: 24px;
}

/* ── Semantische Typografie (Design-System Type Tokens) ── */
.h-display {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text1);
}
.h-1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--text1);
}
.h-2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text1);
}
.h-3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--text1);
}
.label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text3);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text3);
}
.body {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--text1);
}
.body-sm {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text2);
}
.mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--text1);
}
.mono-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
}

/* ── HH-Aliase (kompatibel mit colors_and_type.css) ── */
:root {
  --hh-bg:          var(--bg0);
  --hh-bg-2:        var(--bg3);
  --hh-bg-3:        var(--bg4);
  --hh-surface:     var(--bg1);
  --hh-border:      var(--border);
  --hh-border-2:    var(--border-strong);
  --hh-text:        var(--text1);
  --hh-text-2:      var(--text2);
  --hh-text-3:      var(--text3);
  --hh-primary:     var(--hh-blue);
  --hh-primary-2:   var(--hh-blue-50);
  --hh-primary-3:   var(--hh-blue-600);
  --hh-green:       var(--green);
  --hh-orange:      var(--orange);
  --hh-yellow:      var(--yellow);
  --hh-purple:      var(--purple);
  --hh-cyan:        var(--cyan);
  --hh-mint:        var(--mint);
  --hh-font-sans:    var(--font-ui);
  --hh-font-mono:    var(--font-mono);
  --hh-font-display: var(--font-ui);
  --hh-r-1:         var(--r-1);
  --hh-r-2:         var(--r-2);
  --hh-r-3:         var(--r-3);
  --hh-r-4:         var(--r-4);
  --hh-shadow-sm:   var(--shadow-sm);
  --hh-shadow-md:   var(--shadow-md);
  --hh-shadow-lg:   var(--shadow-lg);
  --hh-focus:       var(--hh-blue);
}