/* ============================================================================
   LEITHOLD DESIGN SYSTEM v2
   Single source of truth for every Leithold surface (JARVIS, Money, Application
   Autopilot, CCRM, future tools).

   All values are DERIVED FROM leithold.com (measured from the live site's markup
   and screenshots), not invented:
     #1C4D88  primary blue   — top bar, headline sections, primary buttons
     #99D4D2  mint           — active nav, secondary buttons, highlights
     #F79007  orange         — call-to-action (Ilja's choice as accent)
     #17252A  ink            — near-black body/heading text
     #FCFAF5  cream          — warm section background
     #03A9F4  bright blue    — links, focus, data accents
     Poppins  headings · Open Sans  body

   LIGHT IS THE DEFAULT for every Leithold surface (white background, Leithold blue).
   [data-skin="dark"] stays available as an opt-in night mode — never as a default.
   ========================================================================== */

/* ---------- 1. BRAND TOKENS (never override these) ---------- */
:root {
  --lh-blue-900:#0F2E52; --lh-blue-800:#153E6E; --lh-blue:#1C4D88;
  --lh-blue-600:#2C64A8; --lh-blue-400:#5B8FC7; --lh-blue-200:#B9D0E7;
  --lh-mint-700:#4E9C99; --lh-mint-600:#6FB8B5; --lh-mint:#99D4D2;
  --lh-mint-300:#BFE4E2; --lh-mint-100:#E6F4F3;
  --lh-orange-700:#C06B00; --lh-orange:#F79007; --lh-orange-300:#FFC073;
  --lh-ink:#17252A; --lh-ink-700:#2E4148; --lh-grey:#585858;
  --lh-grey-400:#808080; --lh-grey-200:#D5D9DC;
  --lh-cream:#FCFAF5; --lh-white:#FFFFFF;
  --lh-sky:#03A9F4;
  --lh-success:#1D9A6C; --lh-warning:#E0A200; --lh-danger:#C8102E;

  /* type */
  --lh-font-head:"Poppins","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lh-font-body:"Open Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lh-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --lh-fs-display:clamp(2.4rem,5vw,4rem);   /* hero */
  --lh-fs-h1:clamp(1.9rem,3.2vw,2.6rem);
  --lh-fs-h2:clamp(1.4rem,2.2vw,1.85rem);
  --lh-fs-h3:1.15rem; --lh-fs-body:1rem; --lh-fs-sm:.875rem; --lh-fs-xs:.75rem;
  --lh-lh-tight:1.15; --lh-lh-body:1.65;
  --lh-tracking-label:.14em;   /* uppercase labels + buttons, as on the site */

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

  /* radius — website uses pill buttons + soft cards */
  --lh-r-sm:8px; --lh-r:14px; --lh-r-lg:20px; --lh-r-pill:999px;

  /* elevation */
  --lh-sh-1:0 1px 2px rgba(23,37,42,.05), 0 2px 8px rgba(23,37,42,.05);
  --lh-sh-2:0 2px 6px rgba(23,37,42,.07), 0 12px 32px rgba(23,37,42,.08);
  --lh-sh-3:0 8px 48px rgba(23,37,42,.16);
  --lh-focus:0 0 0 3px rgba(3,169,244,.35);
  --lh-dur:.18s; --lh-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. SEMANTIC LAYER — light skin (default) ---------- */
:root,
[data-skin="light"] {
  --bg:var(--lh-white); --bg-alt:var(--lh-cream); --bg-invert:var(--lh-blue);
  --surface:var(--lh-white); --surface-2:var(--lh-cream); --surface-3:#F1F4F7;
  --border:var(--lh-grey-200); --border-strong:#B9C2C8;
  --text:var(--lh-ink); --text-muted:var(--lh-grey); --text-invert:var(--lh-white);
  --primary:var(--lh-blue); --primary-hover:var(--lh-blue-800);
  --accent:var(--lh-mint); --accent-hover:var(--lh-mint-600);
  --cta:var(--lh-orange); --cta-hover:var(--lh-orange-700); --cta-text:#fff;
  --link:var(--lh-blue-600);
  --ok:var(--lh-success); --warn:var(--lh-warning); --err:var(--lh-danger);
  --shadow:var(--lh-sh-1); --shadow-lg:var(--lh-sh-2);
  color-scheme:light;
}

/* ---------- 3. SEMANTIC LAYER — dark skin (JARVIS command centre) ---------- */
[data-skin="dark"] {
  --bg:#050A14; --bg-alt:#081222; --bg-invert:var(--lh-mint);
  --surface:rgba(11,24,44,.72); --surface-2:#0C1729; --surface-3:#122036;
  --border:rgba(91,143,199,.22); --border-strong:rgba(91,143,199,.42);
  --text:#E2EDF9; --text-muted:#7F98BA; --text-invert:var(--lh-ink);
  --primary:var(--lh-blue-400); --primary-hover:#7FAEDC;
  --accent:var(--lh-mint); --accent-hover:var(--lh-mint-300);
  --cta:var(--lh-orange); --cta-hover:var(--lh-orange-300); --cta-text:#17252A;
  --link:var(--lh-mint);
  --ok:#35E0A1; --warn:#FFC247; --err:#FF5069;
  --shadow:0 0 24px rgba(0,16,38,.4); --shadow-lg:0 0 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- 4. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
body.lh{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--lh-font-body);font-size:var(--lh-fs-body);line-height:var(--lh-lh-body);
  -webkit-font-smoothing:antialiased}
.lh h1,.lh h2,.lh h3,.lh h4,.lh .lh-head{font-family:var(--lh-font-head);
  line-height:var(--lh-lh-tight);font-weight:600;margin:0;color:var(--text)}
.lh h1{font-size:var(--lh-fs-h1)} .lh h2{font-size:var(--lh-fs-h2)} .lh h3{font-size:var(--lh-fs-h3)}
.lh-display{font-family:var(--lh-font-head);font-size:var(--lh-fs-display);font-weight:300;
  line-height:1.05;letter-spacing:.01em}          /* hero style of leithold.com */
.lh a{color:var(--link);text-decoration:none}
.lh a.lh-btn{color:#fff}   /* Buttons behalten ihre eigene Textfarbe */
.lh a:hover{text-decoration:underline}
.lh-muted{color:var(--text-muted)}
.lh-mono{font-family:var(--lh-font-mono);font-variant-numeric:tabular-nums}
.lh-label{font-size:var(--lh-fs-xs);text-transform:uppercase;letter-spacing:var(--lh-tracking-label);
  font-weight:600;color:var(--text-muted)}

/* ---------- 5. LAYOUT ---------- */
.lh-container{width:min(1240px,100% - var(--lh-8));margin-inline:auto}
.lh-section{padding-block:var(--lh-20)}
.lh-section--alt{background:var(--bg-alt)}
.lh-section--invert{background:var(--lh-blue);color:var(--lh-white)}
.lh-section--invert h1,.lh-section--invert h2,.lh-section--invert h3{color:var(--lh-white)}
.lh-grid{display:grid;gap:var(--lh-4)}
.lh-grid--12{grid-template-columns:repeat(12,1fr)}
.lh-grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lh-stack{display:flex;flex-direction:column;gap:var(--lh-3)}
.lh-row{display:flex;align-items:center;gap:var(--lh-3);flex-wrap:wrap}
@media(max-width:900px){.lh-grid--12{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.lh-grid--12{grid-template-columns:1fr}.lh-section{padding-block:var(--lh-12)}}

/* ---------- 6. BUTTONS (pill + uppercase, exactly the website's language) ---- */
.lh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lh-2);
  font-family:var(--lh-font-body);font-size:var(--lh-fs-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--lh-tracking-label);
  padding:14px 30px;border-radius:var(--lh-r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:all var(--lh-dur) var(--lh-ease);text-decoration:none!important;
  background:var(--primary);color:#fff}
.lh-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--lh-sh-2)}
.lh-btn:focus-visible{outline:none;box-shadow:var(--lh-focus)}
.lh-btn--cta,.lh a.lh-btn--cta{background:var(--cta);color:var(--cta-text)}
.lh-btn--cta:hover{background:var(--cta-hover)}
.lh-btn--mint,.lh a.lh-btn--mint{background:var(--lh-mint);color:var(--lh-ink)}
.lh-btn--mint:hover{background:var(--lh-mint-600);color:#fff}
.lh-btn--ghost,.lh a.lh-btn--ghost{background:transparent;border-color:currentColor;color:var(--text)}
.lh-btn--ghost:hover{background:var(--text);color:var(--bg)}
.lh-btn--on-image,.lh a.lh-btn--on-image{background:transparent;border-color:#fff;color:#fff}
.lh-btn--on-image:hover{background:#fff;color:var(--lh-ink)}
.lh-btn--sm{padding:9px 18px;font-size:var(--lh-fs-xs)}
.lh-btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- 7. CARDS ---------- */
.lh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--lh-r);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.lh-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--lh-3);
  padding:var(--lh-3) var(--lh-4);border-bottom:1px solid var(--border)}
.lh-card__title{font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:var(--lh-tracking-label);font-weight:700;color:var(--primary)}
.lh-card__meta{font-size:var(--lh-fs-xs);color:var(--text-muted)}
.lh-card__body{padding:var(--lh-4);flex:1}
.lh-card--flat{box-shadow:none}
.lh-card--accent{border-top:3px solid var(--accent)}

/* metric tile */
.lh-metric{border:1px solid var(--border);border-radius:var(--lh-r-sm);padding:var(--lh-3);
  background:var(--surface-2)}
.lh-metric__value{font-family:var(--lh-font-mono);font-size:1.4rem;font-weight:700;color:var(--primary)}
.lh-metric__label{font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);margin-top:2px}

/* ---------- 8. FORMS ---------- */
.lh-field{display:flex;flex-direction:column;gap:6px}
.lh-input,.lh-select,.lh-textarea{width:100%;font-family:inherit;font-size:var(--lh-fs-body);
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--lh-r-sm);padding:11px 14px;transition:border-color var(--lh-dur)}
.lh-input:focus,.lh-select:focus,.lh-textarea:focus{outline:none;border-color:var(--lh-sky);
  box-shadow:var(--lh-focus)}
.lh-input::placeholder{color:var(--text-muted)}
.lh-help{font-size:var(--lh-fs-xs);color:var(--text-muted)}

/* ---------- 9. TABLE ---------- */
.lh-table{width:100%;border-collapse:collapse;font-size:var(--lh-fs-sm)}
.lh-table th{text-align:left;font-size:var(--lh-fs-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);font-weight:700;
  padding:var(--lh-3);border-bottom:1px solid var(--border)}
.lh-table td{padding:var(--lh-3);border-bottom:1px solid var(--border)}
.lh-table tr:hover td{background:var(--surface-2)}

/* ---------- 10. STATUS ---------- */
.lh-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--lh-fs-xs);font-weight:700;
  padding:4px 11px;border-radius:var(--lh-r-pill);text-transform:uppercase;letter-spacing:.08em;
  background:var(--lh-mint-100);color:var(--lh-mint-700)}
[data-skin="dark"] .lh-badge{background:rgba(153,212,210,.14);color:var(--lh-mint)}
.lh-badge--ok{background:rgba(29,154,108,.13);color:var(--ok)}
.lh-badge--warn{background:rgba(224,162,0,.15);color:var(--warn)}
.lh-badge--err{background:rgba(200,16,46,.12);color:var(--err)}
.lh-badge--cta{background:rgba(247,144,7,.15);color:var(--lh-orange-700)}
[data-skin="dark"] .lh-badge--cta{color:var(--lh-orange-300)}
.lh-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:none}
.lh-dot--ok{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.lh-dot--warn{background:var(--warn)} .lh-dot--err{background:var(--err)}

/* progress */
.lh-track{height:6px;border-radius:var(--lh-r-pill);background:var(--surface-3);overflow:hidden}
.lh-track>i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--lh-blue-400),var(--primary))}
.lh-track--warn>i{background:linear-gradient(90deg,var(--lh-orange-300),var(--lh-orange))}
.lh-track--err>i{background:linear-gradient(90deg,#ff7b8c,var(--err))}

/* ---------- 11. NAVIGATION (mirrors leithold.com header) ---------- */
.lh-topbar{background:var(--lh-blue);color:#fff;font-size:var(--lh-fs-sm)}
.lh-topbar a{color:#fff}
.lh-header{background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:stretch;justify-content:space-between;gap:var(--lh-4)}
.lh-header__brand{display:flex;align-items:center;gap:var(--lh-3);padding:var(--lh-4)}
.lh-nav{display:flex}
.lh-nav a{display:flex;align-items:center;padding:0 var(--lh-5);color:var(--text);
  font-size:var(--lh-fs-sm);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  text-decoration:none;transition:background var(--lh-dur)}
.lh-nav a:hover{background:var(--lh-mint-100);text-decoration:none}
.lh-nav a.is-active{background:var(--lh-mint);color:var(--lh-ink)}   /* the website's active state */
[data-skin="dark"] .lh-nav a:hover{background:rgba(153,212,210,.12)}
[data-skin="dark"] .lh-nav a.is-active{background:var(--lh-mint);color:var(--lh-ink)}

/* sidebar */
.lh-sidebar{background:var(--surface);border-right:1px solid var(--border);
  padding:var(--lh-4);display:flex;flex-direction:column;gap:var(--lh-1)}
.lh-sidebar a{display:flex;align-items:center;gap:var(--lh-3);padding:10px var(--lh-3);
  border-radius:var(--lh-r-sm);color:var(--text);font-size:var(--lh-fs-sm);text-decoration:none}
.lh-sidebar a:hover{background:var(--surface-2);text-decoration:none}
.lh-sidebar a.is-active{background:var(--lh-mint-100);color:var(--lh-blue);font-weight:600}

/* ---------- 12. HERO (image + overlay + display type) ---------- */
.lh-hero{position:relative;min-height:min(72vh,620px);display:flex;align-items:center;
  color:#fff;background-size:cover;background-position:center}
.lh-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,37,42,.72),rgba(23,37,42,.25))}
.lh-hero>*{position:relative;z-index:1}
.lh-hero h1,.lh-hero .lh-display{color:#fff}
.lh-hero p{max-width:46ch;font-size:1.1rem;opacity:.94}

/* ---------- 13. FEEDBACK ---------- */
.lh-toast{display:flex;gap:var(--lh-3);align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:var(--lh-r-sm);padding:var(--lh-3) var(--lh-4);box-shadow:var(--lh-sh-2)}
.lh-toast--ok{border-left-color:var(--ok)} .lh-toast--warn{border-left-color:var(--warn)}
.lh-toast--err{border-left-color:var(--err)}
.lh-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:100;
  background:rgba(23,37,42,.55);backdrop-filter:blur(3px)}
.lh-modal__box{background:var(--surface);border-radius:var(--lh-r-lg);box-shadow:var(--lh-sh-3);
  width:min(560px,92vw);max-height:86vh;overflow:auto}
.lh-skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;animation:lh-shimmer 1.3s infinite;border-radius:var(--lh-r-sm)}
@keyframes lh-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- 14. UTILITIES ---------- */
.lh-divider{height:1px;background:var(--border);border:0}
.lh-scroll-x{overflow-x:auto}
.lh-center{text-align:center}
.lh-mt-0{margin-top:0}.lh-mt-2{margin-top:var(--lh-2)}.lh-mt-4{margin-top:var(--lh-4)}
.lh-mt-6{margin-top:var(--lh-6)}.lh-mb-4{margin-bottom:var(--lh-4)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}