/* =====================================================================
   SellerSecure Pulse · Design Tokens
   Version 1.0 · 2026-05-18
   
   Alle CSS Custom Properties an einer Stelle. Importieren via
   :root { @import "tokens.css"; } oder direkt im globalen Styles laden.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     BRAND COLORS — aus SellerSecure CI (Schild-Logo, Logout-Pill, Hero)
     ------------------------------------------------------------------- */
  --brand-teal:        #2BA8A8;   /* primärer Akzent */
  --brand-teal-600:    #1E8F8F;   /* hover */
  --brand-teal-700:    #167575;   /* active / text-on-light */
  --brand-teal-50:     #E6F5F5;   /* surface tint */
  --brand-teal-100:    #CFEAEA;   /* border tint */
  
  --brand-navy:        #0F1B2D;   /* Tiefen-Anker */
  --brand-navy-900:    #0A1320;   /* deepest, hover-state */
  --brand-navy-800:    #1A2840;   /* lighter Navy für Gradients */

  /* -------------------------------------------------------------------
     CATEGORY COLORS — die vier Section-Kategorien
     ------------------------------------------------------------------- */
  --cat-lagebild:       #4A50EE;
  --cat-lagebild-50:    #EEEFFE;  /* surface tint */
  --cat-steuerung:      #00A6A6;
  --cat-steuerung-50:   #E0F4F4;
  --cat-analyse:        #E89A1F;
  --cat-analyse-50:     #FCF1E0;
  --cat-strategisch:    #C84A7B;
  --cat-strategisch-50: #F8E8EF;

  /* -------------------------------------------------------------------
     ROLE COLORS — die fünf Rollen
     ------------------------------------------------------------------- */
  --role-marke:     #2BA8A8;  /* = brand-teal: Marke ist primärer Kunde */
  --role-carrier:   #5A8FB8;  /* gedämpftes Blau, Logistik */
  --role-fulfiller: #E89A1F;  /* operatives Orange */
  --role-ccare:     #B8557E;  /* Kommunikations-Magenta */
  --role-auditor:   #36425B;  /* formales Slate-Dark */

  /* -------------------------------------------------------------------
     SURFACE & BACKGROUNDS
     ------------------------------------------------------------------- */
  --bg-page:        #F4F7F9;   /* App-Hintergrund */
  --bg-bar:         #FFFFFF;   /* Top-Bar, Sidebar */
  --bg-elev-1:      #FFFFFF;   /* Karten, Popover */
  --bg-elev-2:      #F4F7F9;   /* leicht gehobenes Element, hover-fill */
  --bg-overlay:     rgba(15, 27, 45, 0.45);  /* Modal-Backdrop */

  /* -------------------------------------------------------------------
     INK COLORS — Text und Icons in absteigender Stärke
     ------------------------------------------------------------------- */
  --ink-900: #0F1B2D;   /* Hauptüberschriften */
  --ink-800: #1F2B40;   /* Body-Text */
  --ink-700: #36425B;   /* Sekundär-Text, Nav-Items */
  --ink-600: #5A6479;   /* Beschreibungen */
  --ink-500: #7A8295;   /* Sub-Labels, Mono-Counter */
  --ink-400: #9CA3B5;   /* Placeholder, deaktiviert */
  --ink-300: #C5CAD6;   /* Trenner, Separator */
  --ink-200: #E1E4EC;   /* Disabled Backgrounds */
  --ink-100: #EDF0F4;   /* Hover-Backgrounds */
  --ink-50:  #F4F7F9;   /* gleich wie bg-page */

  /* -------------------------------------------------------------------
     SIGNAL COLORS — Status-Indikatoren
     ------------------------------------------------------------------- */
  --sig-ok:    #1F9D6B;   /* erfolgreich, live, positiv */
  --sig-warn:  #E89A1F;   /* Warnung, fällig, Aufmerksamkeit */
  --sig-alert: #DC2940;   /* kritisch, Alarm */
  --sig-info:  #2D6EE6;   /* Information */

  /* -------------------------------------------------------------------
     LINES & DIVIDERS
     ------------------------------------------------------------------- */
  --line:        #E5E9EF;   /* normale Trenner */
  --line-strong: #D4D9E2;   /* hervorgehobene Trenner, Input-Hover */

  /* -------------------------------------------------------------------
     SHADOWS — abgestufte Tiefe
     ------------------------------------------------------------------- */
  --shadow-1:    0 1px 0 rgba(15,27,45,0.04), 0 1px 2px rgba(15,27,45,0.04);
  --shadow-2:    0 4px 12px rgba(15,27,45,0.06), 0 1px 2px rgba(15,27,45,0.04);
  --shadow-3:    0 12px 32px rgba(15,27,45,0.10), 0 2px 6px rgba(15,27,45,0.06);
  --shadow-pop:  0 24px 60px rgba(15,27,45,0.18), 0 4px 12px rgba(15,27,45,0.08);
  --shadow-mega: 0 32px 80px rgba(15,27,45,0.22), 0 8px 20px rgba(15,27,45,0.10);

  /* -------------------------------------------------------------------
     RADII — Eck-Rundungen
     ------------------------------------------------------------------- */
  --r-xs:   4px;     /* mini-elements, code-tags */
  --r-sm:   6px;     /* small icons, sub-buttons */
  --r-md:  10px;     /* cards, larger icons */
  --r-lg:  14px;     /* major panels, popovers */
  --r-xl:  18px;     /* heroic surfaces */
  --r-pill: 999px;   /* pills, buttons, search-inputs */

  /* -------------------------------------------------------------------
     SPACING — auf 4-Raster
     ------------------------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* -------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------- */
  --font-ui:   "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Font-Größen */
  --fs-10:   10px;     /* mono-tags, badges */
  --fs-11:   11px;     /* labels, secondary */
  --fs-12:   12px;     /* small body, captions */
  --fs-13:   13px;     /* default body */
  --fs-14:   14px;     /* default UI / Nav */
  --fs-16:   16px;
  --fs-20:   20px;
  --fs-24:   24px;     /* Page-Title */
  --fs-28:   28px;     /* Page-Title large */

  /* Font-Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Line-Heights */
  --lh-tight:  1.2;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* Letter-Spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.12em;
  --ls-widest: 0.18em;

  /* -------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------- */
  --topbar-h:   64px;
  --sidebar-w:  248px;
  --container-max: 1440px;

  /* -------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------- */
  --t-fast:    0.1s ease;
  --t-base:    0.15s ease;
  --t-slow:    0.18s ease;
  --t-pop:     0.14s ease;
}

/* =====================================================================
   FOCUS — global default
   ===================================================================== */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}