/* ============================================================================
   design-tokens.css — Telepski Design-System v3.0
   ============================================================================
   Verbindlicher Cross-Cut-Standard fuer ALLE Telepski-Tools (DEC-133, DOC-160 v3.0).
   Master-Pfad: systeme/design-system/komponenten/design-tokens.css
   Deploy-Mirror: systeme/telepski-tools/public/_shared/components/design-tokens.css

   Verwendung:
     <link rel="stylesheet" href="/_shared/components/design-tokens.css">

   Light- vs. Dark-Mode wird ueber `body.dark-mode` umgeschaltet.
   Alle Komponenten (modal.js, combobox.js, filter-pill.js, sidebar.js, table.js,
   period-picker.js) lesen ausschliesslich diese Variablen.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     1. FARBSYSTEM — Light Mode (Default)
     --------------------------------------------------------------------------- */

  /* Hintergrund-Schichten (von hinten nach vorne) */
  --tp-bg-app:        #F5F5F5;  /* App-Hintergrund (Body) */
  --tp-bg-surface:    #FFFFFF;  /* Karten, Modals, Sidebar, Header */
  --tp-bg-surface-2:  #FAFAFA;  /* Eingebettete Sub-Surfaces (z.B. Code-Block, Empty-State) */
  --tp-bg-overlay:    rgba(0,0,0,0.45);  /* Modal-Backdrop */
  --tp-bg-hover:      #F0F0F0;  /* Hover-States */
  --tp-bg-active:     #E8E8E8;  /* Active/Pressed-States */
  --tp-bg-selected:   rgba(200,160,74,0.10);  /* Aktive Sidebar-Items, gewaehlte Combobox-Option */

  /* Text */
  --tp-text-primary:    #1E1E1E;  /* Primaer-Text — kein reines Schwarz */
  --tp-text-secondary:  #4A4A4A;  /* Sekundaer-Text, Labels */
  --tp-text-tertiary:   #757575;  /* Hilfstexte, Captions, disabled */
  --tp-text-on-accent:  #FFFFFF;  /* Text auf Gold-Hintergrund */
  --tp-text-on-error:   #FFFFFF;
  --tp-text-on-success: #FFFFFF;
  --tp-text-link:       #4A7FB5;  /* Info-Blau */
  --tp-text-link-hover: #3D6A99;

  /* Border */
  --tp-border-default:  #E0E0E0;  /* Standard-Trennlinien */
  --tp-border-strong:   #C8C8C8;  /* Hervorgehobene Trennlinien */
  --tp-border-focus:    #C8A04A;  /* Gold — Keyboard-Focus */
  --tp-border-error:    #C44B3F;
  --tp-border-success:  #3D8C5C;

  /* Akzent (Gold) — sparsam, <2% Flaeche */
  --tp-accent:          #C8A04A;
  --tp-accent-hover:    #B68F3D;
  --tp-accent-active:   #A47E32;
  --tp-accent-soft:     rgba(200,160,74,0.12);  /* Hintergrund fuer Badges, Highlights */

  /* Semantische Farben */
  --tp-success:         #3D8C5C;
  --tp-success-soft:    rgba(61,140,92,0.10);
  --tp-warning:         #C8A04A;        /* Warning teilt sich Gold mit Akzent */
  --tp-warning-soft:    rgba(200,160,74,0.12);
  --tp-error:           #C44B3F;
  --tp-error-soft:      rgba(196,75,63,0.10);
  --tp-info:            #4A7FB5;
  --tp-info-soft:       rgba(74,127,181,0.10);

  /* Schwarz/Weiss-Aliase (fuer Bilder, Logos, sehr selten) */
  --tp-pure-white:      #FFFFFF;
  --tp-near-black:      #1C1C1C;  /* statt #000000 */

  /* ---------------------------------------------------------------------------
     2. TYPOGRAFIE
     --------------------------------------------------------------------------- */

  /* Font-Family — system-ui Pflicht, kein DM Sans, kein JetBrains Mono, kein Arial */
  --tp-font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tp-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Font-Sizes (rem-basiert, 1rem = 16px) */
  --tp-text-xs:      0.75rem;   /* 12px — Captions, Badges */
  --tp-text-sm:      0.875rem;  /* 14px — Sekundaer, Tabellen-Body */
  --tp-text-base:    1rem;      /* 16px — Default Body */
  --tp-text-lg:      1.125rem;  /* 18px — Lead-Paragraph */
  --tp-text-xl:      1.25rem;   /* 20px — Card-Titel */
  --tp-text-2xl:     1.5rem;    /* 24px — Page-H2 */
  --tp-text-3xl:     1.875rem;  /* 30px — Page-H1 */
  --tp-text-4xl:     2.25rem;   /* 36px — Hero (selten) */

  /* Line-Height */
  --tp-leading-tight:  1.25;
  --tp-leading-normal: 1.5;
  --tp-leading-loose:  1.75;

  /* Font-Weight */
  --tp-weight-regular:  400;
  --tp-weight-medium:   500;
  --tp-weight-semibold: 600;
  --tp-weight-bold:     700;

  /* Letter-Spacing */
  --tp-tracking-tight:  -0.01em;
  --tp-tracking-normal: 0;
  --tp-tracking-wide:   0.02em;  /* All-Caps-Labels */

  /* ---------------------------------------------------------------------------
     3. SPACING (4px-Grid)
     --------------------------------------------------------------------------- */
  --tp-space-0:    0;
  --tp-space-1:    0.25rem;   /*  4px */
  --tp-space-2:    0.5rem;    /*  8px */
  --tp-space-3:    0.75rem;   /* 12px */
  --tp-space-4:    1rem;      /* 16px */
  --tp-space-5:    1.25rem;   /* 20px */
  --tp-space-6:    1.5rem;    /* 24px */
  --tp-space-8:    2rem;      /* 32px */
  --tp-space-10:   2.5rem;    /* 40px */
  --tp-space-12:   3rem;      /* 48px */
  --tp-space-16:   4rem;      /* 64px */
  --tp-space-20:   5rem;      /* 80px */

  /* ---------------------------------------------------------------------------
     4. RADIEN
     --------------------------------------------------------------------------- */
  --tp-radius-sm:    6px;    /* Badges, Tags */
  --tp-radius-md:    8px;    /* Inputs (klein), Buttons (klein) */
  --tp-radius-lg:    12px;   /* Buttons, Inputs, Comboboxen */
  --tp-radius-xl:    16px;   /* Cards, Modals */
  --tp-radius-2xl:   20px;   /* Hero-Cards */
  --tp-radius-pill:  9999px; /* Pills, Filter-Chips */
  --tp-radius-full:  50%;    /* Avatare */

  /* ---------------------------------------------------------------------------
     5. SHADOWS
     --------------------------------------------------------------------------- */
  --tp-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --tp-shadow-sm:  0 2px 4px rgba(0,0,0,0.06);
  --tp-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --tp-shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --tp-shadow-xl:  0 20px 48px rgba(0,0,0,0.18);  /* Modals */
  --tp-shadow-focus: 0 0 0 3px rgba(200,160,74,0.35);  /* Focus-Ring Gold */

  /* ---------------------------------------------------------------------------
     6. ANIMATION
     --------------------------------------------------------------------------- */
  --tp-duration-fast:    100ms;
  --tp-duration-normal:  150ms;  /* Standard fuer Hover/Click — Henrik-Direktive */
  --tp-duration-slow:    200ms;  /* Modal-Open, Drawer */
  --tp-duration-slower:  300ms;  /* Komplexe Page-Transitions */

  --tp-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);   /* Standard — subtle */
  --tp-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --tp-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------------------------------------------------------------------------
     7. Z-INDEX
     --------------------------------------------------------------------------- */
  --tp-z-base:       0;
  --tp-z-sticky:     100;   /* Sticky-Headers, Sticky-Filter-Bars */
  --tp-z-dropdown:   200;   /* Combobox, Dropdown, Period-Picker */
  --tp-z-overlay:    1000;  /* Modal-Backdrop */
  --tp-z-modal:      1010;  /* Modal-Surface */
  --tp-z-popover:    1100;  /* Tooltip, Popover */
  --tp-z-toast:      1200;  /* Toast-Notifications */
  --tp-z-max:        9999;  /* Notausgang */

  /* ---------------------------------------------------------------------------
     8. LAYOUT — Sidebar & Header
     --------------------------------------------------------------------------- */
  --tp-sidebar-width:        260px;   /* Default 240–280px-Range, Mid-Wert */
  --tp-sidebar-width-min:    240px;
  --tp-sidebar-width-max:    280px;
  --tp-sidebar-collapsed:    64px;    /* Icon-only-Mode */
  --tp-header-height:        56px;
  --tp-header-height-thin:   44px;    /* Tools-Portal-Auth-Bar */

  /* Touch-Targets — WCAG 2.5.5 (>= 44px) */
  --tp-touch-target:         44px;
  --tp-touch-target-min:     32px;    /* Sehr-kompakte Tabellen-Inline-Aktionen, nur Desktop */

  /* ---------------------------------------------------------------------------
     9. BREAKPOINTS (CSS-Custom-Property zur Doku — JS-seitig in Komponenten gespiegelt)
     --------------------------------------------------------------------------- */
  --tp-bp-sm:  640px;
  --tp-bp-md:  768px;   /* Sidebar wird Drawer */
  --tp-bp-lg:  1024px;
  --tp-bp-xl:  1280px;
  --tp-bp-2xl: 1536px;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
body.dark-mode {
  --tp-bg-app:        #1A1A1A;
  --tp-bg-surface:    #242424;
  --tp-bg-surface-2:  #2D2D2D;
  --tp-bg-overlay:    rgba(0,0,0,0.65);
  --tp-bg-hover:      #2F2F2F;
  --tp-bg-active:     #383838;
  --tp-bg-selected:   rgba(200,160,74,0.18);

  --tp-text-primary:    #E8E8E8;
  --tp-text-secondary:  #B5B5B5;
  --tp-text-tertiary:   #888888;
  --tp-text-link:       #6FA0CC;
  --tp-text-link-hover: #8AB5DC;

  --tp-border-default:  #3A3A3A;
  --tp-border-strong:   #525252;
  --tp-border-focus:    #C8A04A;

  --tp-accent:          #D2AC5C;        /* Leicht heller im Dark-Mode fuer Kontrast */
  --tp-accent-hover:    #DDB870;
  --tp-accent-active:   #E5C386;
  --tp-accent-soft:     rgba(210,172,92,0.18);

  --tp-success-soft:    rgba(61,140,92,0.20);
  --tp-warning-soft:    rgba(210,172,92,0.20);
  --tp-error-soft:      rgba(196,75,63,0.20);
  --tp-info-soft:       rgba(111,160,204,0.20);

  --tp-shadow-xs:  0 1px 2px rgba(0,0,0,0.30);
  --tp-shadow-sm:  0 2px 4px rgba(0,0,0,0.35);
  --tp-shadow-md:  0 4px 12px rgba(0,0,0,0.45);
  --tp-shadow-lg:  0 8px 24px rgba(0,0,0,0.55);
  --tp-shadow-xl:  0 20px 48px rgba(0,0,0,0.70);
}

/* ============================================================================
   GLOBAL BASE — gilt fuer alle Tools, sobald Tokens geladen sind
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--tp-font-sans);
  font-size: var(--tp-text-base);
  line-height: var(--tp-leading-normal);
  color: var(--tp-text-primary);
  background: var(--tp-bg-app);
  transition: background-color var(--tp-duration-normal) var(--tp-ease-out),
              color var(--tp-duration-normal) var(--tp-ease-out);
}

/* Focus-Ring — Pflicht, WCAG AA */
:focus-visible {
  outline: 2px solid var(--tp-border-focus);
  outline-offset: 2px;
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbar (subtil, system-nah) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--tp-border-default);
  border-radius: var(--tp-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tp-border-strong);
}