/* =============================================================================
   STALTEC BRAND CSS
   Design-System-Tokens für interne Web-Apps (Finance Hub & Co.)
   Stand: 2026-05
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Brand-Tokens (raw values — bitte beibehalten, exakt wie aus Webflow)
   ----------------------------------------------------------------------------- */
:root {
  --staltec-black:                  #1a1a1a;
  --staltec-dark-grey:              #2e2f2f;
  --staltec-deep-steel-green:       #3e4a45;
  --staltec-steel-green:            #5f6f68;
  --staltec-signal-green:           #5fa78f;
  --staltec-light-steel-green:      #cbd8c3;
  --staltec-light-industrial-grey:  #d0d2d0;
  --staltec-off-white:              #f3f4f2;
  --staltec-pure-white:             #ffffff;

  /* Abgeleitete Stufen (für Hover/Active/Subtle-States — manuell abgestimmt) */
  --staltec-signal-green-hover:     #51917b;
  --staltec-signal-green-active:    #447b68;
  --staltec-signal-green-subtle:    #e8f1ec;

  --staltec-steel-green-08:         rgba(95, 111, 104, 0.08);
  --staltec-steel-green-16:         rgba(95, 111, 104, 0.16);
  --staltec-black-04:               rgba(26, 26, 26, 0.04);
  --staltec-black-08:               rgba(26, 26, 26, 0.08);
  --staltec-black-12:               rgba(26, 26, 26, 0.12);

  /* Ampel-Status (außerhalb der Brand-Palette — bewusst gedämpfte Industrie-Töne) */
  --staltec-status-ok:              #5fa78f;  /* = signal-green */
  --staltec-status-ok-subtle:       #e8f1ec;
  --staltec-status-warn:            #c89531;  /* warmes Ocker, nicht Neon-Gelb */
  --staltec-status-warn-subtle:     #f7eed8;
  --staltec-status-error:           #b2453a;  /* gedämpftes Industrierot */
  --staltec-status-error-subtle:    #f5dedb;
  --staltec-status-info:            #5f6f68;  /* = steel-green */
  --staltec-status-info-subtle:     #e4e7e5;

  /* -----------------------------------------------------------------------------
     2. Semantische Alias-Tokens (Light-Mode default)
     App-Code nutzt AUSSCHLIEßLICH diese — niemals --staltec-* direkt.
     ----------------------------------------------------------------------------- */

  /* Flächen */
  --color-bg-app:           var(--staltec-off-white);
  --color-bg-surface:       var(--staltec-pure-white);
  --color-bg-surface-alt:   var(--staltec-off-white);
  --color-bg-sunken:        #ebece9;
  --color-bg-inverse:       var(--staltec-deep-steel-green);
  --color-bg-inverse-alt:   var(--staltec-dark-grey);

  /* Text */
  --color-text-primary:     var(--staltec-black);
  --color-text-secondary:   var(--staltec-dark-grey);
  --color-text-muted:       var(--staltec-steel-green);
  --color-text-disabled:    #9ea29f;
  --color-text-on-inverse:  var(--staltec-pure-white);
  --color-text-on-accent:   var(--staltec-pure-white);
  --color-text-link:        var(--staltec-deep-steel-green);

  /* Akzent (Primary) */
  --color-accent:           var(--staltec-signal-green);
  --color-accent-hover:     var(--staltec-signal-green-hover);
  --color-accent-active:    var(--staltec-signal-green-active);
  --color-accent-subtle:    var(--staltec-signal-green-subtle);

  /* Status (Ampel) */
  --color-status-ok:            var(--staltec-status-ok);
  --color-status-ok-subtle:     var(--staltec-status-ok-subtle);
  --color-status-warn:          var(--staltec-status-warn);
  --color-status-warn-subtle:   var(--staltec-status-warn-subtle);
  --color-status-error:         var(--staltec-status-error);
  --color-status-error-subtle:  var(--staltec-status-error-subtle);
  --color-status-info:          var(--staltec-status-info);
  --color-status-info-subtle:   var(--staltec-status-info-subtle);

  /* Trennlinien */
  --color-border:           var(--staltec-light-industrial-grey);
  --color-border-strong:    #b4b7b4;
  --color-border-subtle:    #e0e2df;
  --color-divider:          #e6e7e4;
  --color-focus-ring:       var(--staltec-signal-green);

  /* Form-States */
  --color-input-bg:         var(--staltec-pure-white);
  --color-input-border:     var(--staltec-light-industrial-grey);
  --color-input-border-hover: #a8aba8;
  --color-input-placeholder: #9ea29f;

  /* -----------------------------------------------------------------------------
     3. Typografie
     ----------------------------------------------------------------------------- */
  --font-family-sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* Sizes — Type-Scale auf 14px Body, technisch-dichte Stufen */
  --font-size-2xs:  10px;   /* Caps-Labels in Tabellen-Headern */
  --font-size-xs:   12px;   /* Hinweistext, Helper */
  --font-size-sm:   13px;
  --font-size-base: 14px;   /* Standard Body */
  --font-size-md:   15px;
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;   /* Stat-Kennzahlen */
  --font-size-5xl:  48px;

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line-Heights */
  --line-height-tight:    1.15;
  --line-height-snug:     1.3;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.65;

  /* Letter-Spacing */
  --letter-spacing-caps:    0.08em;   /* für Caps-Header */
  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;

  /* -----------------------------------------------------------------------------
     4. Spacing (4px-Basis)
     ----------------------------------------------------------------------------- */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* -----------------------------------------------------------------------------
     5. Radii (geometrisch, 0–4px laut Brief)
     ----------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-pill: 999px;   /* nur für Status-Badges erlaubt */

  /* -----------------------------------------------------------------------------
     6. Shadows (sehr zurückhaltend — Industrie, nicht SaaS)
     ----------------------------------------------------------------------------- */
  --shadow-none:    none;
  --shadow-xs:      0 1px 0 0 rgba(26,26,26,0.04);
  --shadow-sm:      0 1px 2px 0 rgba(26,26,26,0.06), 0 0 0 1px rgba(26,26,26,0.04);
  --shadow-md:      0 2px 4px -1px rgba(26,26,26,0.08), 0 1px 2px 0 rgba(26,26,26,0.04);
  --shadow-lg:      0 6px 16px -4px rgba(26,26,26,0.10), 0 2px 4px -1px rgba(26,26,26,0.04);
  --shadow-focus:   0 0 0 3px rgba(95, 167, 143, 0.30);
  --shadow-focus-error: 0 0 0 3px rgba(178, 69, 58, 0.25);

  /* -----------------------------------------------------------------------------
     7. Transitions
     ----------------------------------------------------------------------------- */
  --transition-fast:    120ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base:    180ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow:    280ms cubic-bezier(0.2, 0, 0.2, 1);

  /* -----------------------------------------------------------------------------
     8. Layout
     ----------------------------------------------------------------------------- */
  --layout-max-width:        1440px;
  --layout-header-height:    56px;
  --layout-sidebar-width:    240px;
  --layout-sidebar-collapsed: 56px;
  --z-base:        0;
  --z-sticky:      100;
  --z-overlay:     500;
  --z-modal:       700;
  --z-toast:       900;
}

/* -----------------------------------------------------------------------------
   9. Dark Mode — explizit aktivierbar via [data-theme="dark"]
   Hell-dominiert ist die Default-Erfahrung; Dark dient z.B. Präsentations-/
   Long-Run-Sitzungen am Großbild. Behält dieselbe Akzentfarbe.
   ----------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg-app:           var(--staltec-black);
  --color-bg-surface:       #1f2120;
  --color-bg-surface-alt:   #262827;
  --color-bg-sunken:        #161716;
  --color-bg-inverse:       var(--staltec-off-white);
  --color-bg-inverse-alt:   var(--staltec-light-industrial-grey);

  --color-text-primary:     #f3f4f2;
  --color-text-secondary:   #c8cac8;
  --color-text-muted:       #8e928f;
  --color-text-disabled:    #555857;
  --color-text-on-inverse:  var(--staltec-black);
  --color-text-on-accent:   var(--staltec-black);
  --color-text-link:        var(--staltec-light-steel-green);

  --color-accent:           var(--staltec-signal-green);
  --color-accent-hover:     #6db59c;
  --color-accent-active:    #7bc1a8;
  --color-accent-subtle:    rgba(95, 167, 143, 0.14);

  --color-status-ok:            #6db59c;
  --color-status-ok-subtle:     rgba(95, 167, 143, 0.16);
  --color-status-warn:          #e0ad4a;
  --color-status-warn-subtle:   rgba(200, 149, 49, 0.18);
  --color-status-error:         #d56354;
  --color-status-error-subtle:  rgba(178, 69, 58, 0.20);
  --color-status-info:          #8e928f;
  --color-status-info-subtle:   rgba(95, 111, 104, 0.20);

  --color-border:           #3a3c3b;
  --color-border-strong:    #4d504e;
  --color-border-subtle:    #2c2e2d;
  --color-divider:          #2c2e2d;

  --color-input-bg:         #1a1c1b;
  --color-input-border:     #3a3c3b;
  --color-input-border-hover: #555857;
  --color-input-placeholder: #6f726f;

  --shadow-xs:      0 1px 0 0 rgba(0,0,0,0.30);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md:      0 2px 4px -1px rgba(0,0,0,0.45), 0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow-lg:      0 6px 16px -4px rgba(0,0,0,0.50), 0 2px 4px -1px rgba(0,0,0,0.30);
}

/* -----------------------------------------------------------------------------
   10. Base Reset + Typographie-Defaults
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum';   /* tabular nums für Zahlen */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--color-text-muted); }

p { margin: 0; }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

button { font: inherit; cursor: pointer; }

/* tabular numerals helper — auf jedes Element, das Zahlen anzeigt */
.is-tnum, table, .stat-value, input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* Accessibility: visible focus */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Selektion */
::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
}