/* Digital Control – CSS Design Tokens v1.5 · 21. April 2026 */
/* Basis: dc-design-system (dist/tokens.css). Projekt-Override: --dc-product-color. */

:root {
  /* Produktfarbe – DC OS nutzt Plattform-Blau (kein Finance/Media/Intelligence) */
  --dc-product-color: #2B52C7;

  /* Akzentfarben */
  --dc-finance-desk: #f3075c;
  --dc-media-desk: #1d98a7;
  --dc-intelligence-qube: #fec200;

  /* Petrol */
  --dc-petrol: #507b7f;
  --dc-petrol-hover: #345754;
  --dc-helles-petrol: #b7c8ca;
  --dc-hellstes-petrol: #e9eeef;
  --dc-cta: #83baba;

  /* Graustufen */
  --dc-anthrazit: #2d2d2d;
  --dc-dunkelgrau: #3d3d3d;
  --dc-grau: #606060;
  --dc-medium-grau: #8c8c8c;
  --dc-hellgrau: #aaaaaa;
  --dc-hellergrau: #dcdcdc;
  --dc-noch-heller-grau: #e8e8e8;
  --dc-hellstesgrau: #f4f4f4;
  --dc-white: #ffffff;

  /* Semantische Feedback-Farben – für System-Meldungen */
  --dc-success: #1f7a4d;
  --dc-success-hover: #166340;
  --dc-error: #b33a3a;
  --dc-error-hover: #922d2d;
  --dc-warning: #b8801f;
  --dc-warning-hover: #946618;
  --dc-info: #1e56a5;
  --dc-info-hover: #164484;

  /* Typografie */
  --font-raleway: 'Raleway', sans-serif;
  --font-roboto: 'Roboto', sans-serif;

  /* Schriftgrößen (rem, Basis 16px) */
  --font-size-text: 0.6875rem;       /* 11px */
  --font-size-menu-level2: 0.75rem;   /* 12px */
  --font-size-button: 0.8125rem;      /* 13px */
  --font-size-menu-level1: 0.8125rem; /* 13px */
  --font-size-input: 0.8125rem;       /* 13px – DC-Design-System: Input-Schrift 13px */
  --font-size-card-header: 1rem;      /* 16px */
  --font-size-page-title: 1.625rem;   /* 26px */

  /* Border-Radien (px – bleiben pixelgenau) */
  --radius-stage-corner: 12px;
  --radius-card: 8px;
  --radius-modal: 8px;
  --radius-button: 5px;
  --radius-input: 5px;

  /* Form Inputs */
  --input-height-sm: 30px;
  --input-height: 36px;
  --input-height-lg: 44px;
  --input-padding-x: 12px;

  /* Modal */
  --modal-backdrop: rgba(45, 45, 45, 0.45);
  --modal-padding-header: 1.25rem 1.5rem;  /* 20px 24px */
  --modal-padding-body: 1.5rem;            /* 24px */
  --modal-padding-footer: 1rem 1.5rem;     /* 16px 24px */
  --modal-max-width-sm: 420px;
  --modal-max-width: 600px;
  --modal-max-width-lg: 800px;

  /* Layout (px – feste App-Chrome-Dimensionen) */
  --header-height: 82px;
  --header-logo-height: 52px;
  --header-avatar-size: 40px;
  --sidebar-width-expanded: 220px;
  --sidebar-width-collapsed: 60px;
  --content-padding-x: 1.5rem;    /* 24px */
  --content-padding-y: 1.875rem;  /* 30px */

  /* Navigation (px – Icon-Größen bleiben pixelgenau) */
  --nav-icon-size-level1: 19px;
  --nav-icon-size-level2: 16px;
  --nav-row-height-level1: 40px;
  --nav-row-height-level2: 36px;
  --nav-hover-bg: #e8e8e8;
  --nav-active-bg: #f4f4f4;

  /* Buttons (px – feste Dimensionen) */
  --button-height: 31px;
  --button-min-width: 100px;
  --button-letter-spacing: 0.077em; /* ~1px bei 13px */
  --button-gap: 1.25rem;           /* 20px */

  /* Tabelle */
  --table-row-hover: #e8e8e8;

  /* Content Card */
  --card-padding: 1.5rem;                  /* 24px – Body rundum */
  --card-padding-header: 1rem 1.5rem;      /* 16px tb · 24px lr */
  --card-padding-footer: 1rem 1.5rem;      /* 16px tb · 24px lr */
  --card-gap: 1.25rem;                     /* 20px – zwischen mehreren Cards */

  /* Feedback / Flash */
  --flash-padding: 0.875rem 1.125rem 0.875rem 0.875rem; /* 14px tb · 14px links · 18px rechts */
  --flash-gap: 0.875rem;                   /* 14px zwischen Icon · Text · Close */
  --flash-stack-gap: 0.75rem;              /* 12px zwischen mehreren Flashes */
  --flash-accent-width: 4px;               /* linker Akzentstreifen */

  /* Schatten */
  --shadow-modal: none;
  --shadow-dropdown: 0 2px 8px rgba(0,0,0,.08);
  /* Weicher Overlay-Schatten für schwebende Fenster (Hilfe-/Mentor-Widget). */
  --dc-overlay-shadow: 0 2px 6px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.16);
}

/* ============================================================
   Dark Mode — Grau-/Flächen-Tokens umkehren. Komponenten nutzen
   konsequent var(--dc-*), daher flippt das Überschreiben der Tokens
   KB-Artikel, Support-Modal und Chat mit; Produkt-/Petrol-Akzente
   bleiben. Aktiv via html[data-theme="dark"] — der Widget-Embed
   schreibt das Attribut (u.a. aus dem IQ-Frontend, das den App-
   Dunkelmodus durchreicht).
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --dc-white: #1e2329;            /* Flächen: Cards, Modals, Composer */
  --dc-hellstesgrau: #262c33;     /* Stage, gerade Zeilen, aktive Items */
  --dc-noch-heller-grau: #333a42; /* Zell-Rahmen, Menü-Hover */
  --dc-hellergrau: #3a424b;       /* Rahmen, Divider, Card-Rahmen */
  --dc-hellgrau: #6b7480;         /* Divider, Icons */
  --dc-medium-grau: #9aa3ac;      /* Placeholder, Meta, disabled */
  --dc-grau: #c3c9cf;             /* Standardtext */
  --dc-dunkelgrau: #dfe3e7;       /* Kontrasttext */
  --dc-anthrazit: #f1f3f5;        /* stärkster Text */
  --dc-hellstes-petrol: #233a3f;  /* Assistant-Bubble-Fläche */

  --nav-hover-bg: #262c33;
  --nav-active-bg: #333a42;
  --table-row-hover: #333a42;

  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --dc-overlay-shadow: 0 2px 6px rgba(0,0,0,.45), 0 16px 34px rgba(0,0,0,.55);
}

/* ============================================================
   Typografie-Klassen (Single Source of Truth)
   Nutzung: .t-* setzt Font/Size/Weight/LH/Transform.
   Farbe separat via .c-* oder Komponenten-Kontext.
   ============================================================ */

.t-body {
  font-family: var(--font-roboto);
  font-size: 0.8125rem; /* 13px */
  font-weight: 400;
  line-height: 1.6;
}
.t-body-tight {
  font-family: var(--font-roboto);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
}
.t-body-strong {
  font-family: var(--font-roboto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
.t-caption {
  font-family: var(--font-roboto);
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  line-height: 1.3;
}
.t-micro {
  font-family: var(--font-roboto);
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  line-height: 1.5;
}
.t-table-head {
  font-family: var(--font-roboto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.036em;
}
.t-tab {
  font-family: var(--font-roboto);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.036em;
}
.t-tab.is-active { font-weight: 600; }
.t-button {
  font-family: var(--font-roboto);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--button-letter-spacing);
}
.t-nav-1 {
  font-family: var(--font-raleway);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
}
.t-nav-2 {
  font-family: var(--font-raleway);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
}
.t-title-md {
  font-family: var(--font-raleway);
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.3;
}
.t-title-md-soft {
  font-family: var(--font-raleway);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}
.t-title-lg {
  font-family: var(--font-raleway);
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  line-height: 1.3;
}
.t-title-xl {
  font-family: var(--font-raleway);
  font-size: 1.5rem; /* 24px */
  font-weight: 500;
  line-height: 1.2;
}

/* KPI-Zahlen (Dashboards, Revenue, Credits, Usage)
   Groß, Raleway 700, dicht (line-height 1.1), für Zahlen-KPIs.
   Farbe via .c-* oder Inline (semantische Cost/Revenue-Farben). */
.t-number-xl {
  font-family: var(--font-raleway);
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  line-height: 1.1;
}
.t-number-lg {
  font-family: var(--font-raleway);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.1;
}
.t-number-md {
  font-family: var(--font-raleway);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.1;
}

/* Section-Label / Overline (Abschnittskopf in Cards) —
   Raleway 12px 700 UPPERCASE, dezente Letter-Spacing.
   Farbe via .c-grau oder .c-medium-grau. */
.t-overline {
  font-family: var(--font-raleway);
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Farb-Utilities */
.c-anthrazit   { color: var(--dc-anthrazit); }
.c-dunkelgrau  { color: var(--dc-dunkelgrau); }
.c-grau        { color: var(--dc-grau); }
.c-medium-grau { color: var(--dc-medium-grau); }
.c-hellgrau    { color: var(--dc-hellgrau); }
.c-hellergrau  { color: var(--dc-hellergrau); }
.c-white       { color: var(--dc-white); }
.c-product     { color: var(--dc-product-color); }
.c-petrol      { color: var(--dc-petrol); }
.c-success     { color: var(--dc-success); }
.c-error       { color: var(--dc-error); }
.c-warning     { color: var(--dc-warning); }
.c-info        { color: var(--dc-info); }

/* Font-Weight Utilities (pairs with .t-* typography base classes) */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Font-Family Utilities */
.f-raleway { font-family: var(--font-raleway); }
.f-roboto  { font-family: var(--font-roboto); }
.f-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Semantic Badge (inline label, e.g. HTTP methods, active flags) */
.dc-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-roboto);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--dc-medium-grau);
  color: var(--dc-white);
}
.dc-badge--petrol  { background: var(--dc-petrol); }
.dc-badge--success { background: var(--dc-success); }
.dc-badge--warning { background: var(--dc-warning); }
.dc-badge--error   { background: var(--dc-error); }
.dc-badge--muted   { background: var(--dc-hellergrau); color: var(--dc-grau); }

/* Status Dot – 8×8 farbiger Indikator */
.dc-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dc-hellergrau);
  flex-shrink: 0;
}
.dc-status-dot--success { background: var(--dc-success); }
.dc-status-dot--error   { background: var(--dc-error); }
.dc-status-dot--warning { background: var(--dc-warning); }
.dc-status-dot--petrol  { background: var(--dc-petrol); }
.dc-status-dot--product { background: var(--dc-product-color); }