/* ==========================================================================
   tokens.css — Zentrales Design-Token-System
   Lädt vor allen anderen CSS-Dateien.
   Alle Token-Werte entsprechen exakt den bisherigen hartkodierten Werten.
   ========================================================================== */

:root {
  /* ========================================================================
     FARBEN — Neutral-Palette
     ======================================================================== */

  --color-white:       #ffffff;
  --color-gray-50:     #f8fafc;
  --color-gray-75:     #f5f7fb;
  --color-gray-100:    #f2f4f8;
  --color-gray-150:    #eef2f7;
  --color-gray-200:    #edf1f6;
  --color-gray-300:    #e5e7eb;
  --color-gray-400:    #d0d7e2;
  --color-gray-500:    #d2dbe8;
  --color-gray-600:    #94a3b8;
  --color-gray-700:    #64748b;
  --color-gray-800:    #475569;
  --color-gray-900:    #334155;
  --color-gray-950:    #1e293b;
  --color-gray-975:    #1f2937;
  --color-black:       #111827;

  /* ========================================================================
     FARBEN — Semantische Hauptfarben (kompatibel mit base.css)
     ======================================================================== */

  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #356dff;
  --color-background:     #f5f7fb;
  --color-surface:        #ffffff;
  --color-text:           #111827;
  --color-text-muted:     #6b7280;
  --color-border:         #e5e7eb;
  --color-border-light:   #edf1f6;
  --color-border-subtle:  #e6edf8;
  --color-success:        #22c55e;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-info:           #0ea5e9;

  /* ========================================================================
     FARBEN — Semantische Hintergründe (Tags, Badges, Icon-Tones, Tips)
     ======================================================================== */

  --bg-blue-subtle:     #eef2ff;
  --bg-blue-pale:       #e8efff;
  --bg-blue-wash:       #e8f0ff;
  --bg-blue-tint:       #f7faff;
  --bg-blue-ghost:      #f4f8ff;
  --bg-blue-hint:       #f6f9ff;
  --bg-blue-soft:       #d8e3ff;
  --bg-blue-mist:       #dbe7ff;
  --bg-blue-veil:       #d7e3ff;

  --bg-green-subtle:    #e8f7ed;

  --bg-orange-subtle:   #fff4e5;
  --bg-orange-pale:     #fff1e7;

  --bg-red-subtle:      #feecec;

  --bg-purple-subtle:   #f3e8ff;
  --bg-purple-pale:     #f1eaff;

  --bg-cyan-subtle:     #e6fbff;

  --bg-yellow-subtle:   #fff7db;

  --bg-surface-subtle:  #fafcff;
  --bg-surface-pale:    #fbfcff;
  --bg-surface-wash:    #fbfdff;

  /* ========================================================================
     FARBEN — Semantische Textfarben (Status-Pills, Tags, Trends)
     ======================================================================== */

  --text-success:       #15803d;
  --text-success-light: #16a34a;
  --text-warning:       #b45309;
  --text-warning-bold:  #c2410c;
  --text-danger:        #b91c1c;
  --text-danger-light:  #dc2626;
  --text-info:          #1d4ed8;
  --text-info-deep:     #1e40af;
  --text-purple:        #6d28d9;
  --text-purple-light:  #7c3aed;
  --text-purple-mid:    #9333ea;
  --text-teal:          #0f766e;
  --text-sky:           #0284c7;
  --text-amber:         #ea8a00;
  --text-orange-mid:    #f97316;

  /* ========================================================================
     TYPOGRAFIE — Schriftgrößen-Skala
     Reduzierte Werte für kompaktere, professionellere UI (ca. eine Stufe kleiner).
     ======================================================================== */

  --text-2xs:    0.65rem;   /* notification badge */
  --text-xs:     0.69rem;   /* appointment date small */
  --text-sm:     0.72rem;   /* badges, tags, pills */
  --text-sm2:    0.74rem;   /* profile avatar */
  --text-sm3:    0.75rem;   /* doc-tag */
  --text-sm4:    0.76rem;   /* thread-message meta */
  --text-sm5:    0.77rem;   /* button--small, details dt, property rent label */
  --text-sm6:    0.78rem;   /* package-card, task cell small, meter td small */
  --text-sm7:    0.79rem;   /* appointment-meta, meter title cell small */
  --text-sm8:    0.80rem;   /* task due, doc title small, rent chart labels */
  --text-sm9:    0.8125rem; /* document item, table th (tasks), settings muted */
  --text-base:   0.8125rem; /* brand text small, contracts th, footer text */
  --text-base2:  0.825rem;  /* property sub/row meta, rent block meta, panel empty */
  --text-base3:  0.8375rem; /* sidebar nav label, profile meta strong */
  --text-base4:  0.85rem;   /* search inputs, kpi description, panel-link */
  --text-md:     0.875rem;  /* body, page-head p, conversation avatar, h3 fallback */
  --text-md2:    0.90rem;   /* quick-action strong */
  --text-md3:    0.91rem;   /* activity-item meta strong */
  --text-md4:    0.92rem;   /* document-item meta strong, conversation h3 */
  --text-md5:    0.95rem;   /* appointment-date strong */
  --text-md6:    0.97rem;   /* task-item meta strong */
  --text-lg:     1.00rem;   /* responsive property-item strong */
  --text-lg2:    1.03rem;   /* tenant actions, quick-setting icon */
  --text-lg3:    1.05rem;   /* responsive property h2 */
  --text-lg4:    1.10rem;   /* responsive property-item strong */
  --text-xl:     1.20rem;   /* kpi-card h2, task-item due span */
  --text-xl2:    1.25rem;   /* responsive property-row h2 */
  --text-xl3:    1.30rem;   /* property-item meta strong, property-units h2 */
  --text-xl4:    1.35rem;   /* responsive panel-card head h2 */
  --text-2xl:    1.45rem;   /* property-item rent strong, brand text strong */
  --text-2xl2:   1.55rem;   /* property-row main h2 */
  --text-2xl3:   1.65rem;   /* panel-card head h2, property rent strong, conv h2 */
  --text-3xl:    1.75rem;   /* placeholder-panel h2 */
  --text-3xl2:   1.85rem;   /* kpi-card__value */
  --text-3xl3:   2.00rem;   /* page-head h1 (max) */
  --text-4xl:    2.10rem;   /* rent-block__value */

  /* ========================================================================
     TYPOGRAFIE — Page-Head h1 (clamp-basiert, folgt neuer Skala)
     ======================================================================== */

  --text-page-head: clamp(1.35rem, 1.5vw, 2.00rem);

  /* ========================================================================
     SPACING — Abstands-Skala
     ======================================================================== */

  --space-0:   2px;
  --space-1:   3px;
  --space-2:   4px;
  --space-3:   5px;
  --space-4:   6px;
  --space-5:   8px;
  --space-6:   10px;
  --space-7:   11px;
  --space-8:   12px;
  --space-9:   14px;
  --space-10:  15px;
  --space-11:  16px;
  --space-12:  18px;
  --space-13:  20px;
  --space-14:  22px;
  --space-15:  24px;

  /* ========================================================================
     RADIUS — Abrundungs-Skala
     ======================================================================== */

  --r-xs:    6px;
  --r-sm:    8px;
  --r-md:   10px;
  --r-lg:   11px;
  --r-xl:   12px;
  --r-2xl:  14px;
  --r-3xl:  18px;
  --r-full: 999px;

  /* Semantische Radius-Tokens (auf --r-* gemappt, keine Überschreibung) */
  --radius-sm:   var(--r-md);    /* 10px */
  --radius-md:   var(--r-2xl);   /* 14px */
  --radius-lg:   var(--r-3xl);   /* 18px */

  /* ========================================================================
     SHADOW
     ======================================================================== */

  --shadow-card: 0 1px 1px rgba(17, 24, 39, 0.02), 0 6px 22px rgba(17, 24, 39, 0.04);
  --shadow-active: 0 8px 18px rgba(37, 99, 235, 0.26);

  /* ========================================================================
     KOMPONENTEN — Buttons
     ======================================================================== */

  --btn-padding-y:    11px;
  --btn-padding-x:    16px;
  --btn-font-size:    inherit;
  --btn-font-weight:  700;
  --btn-radius:       var(--r-md);
  --btn-transition:   all 140ms ease;

  /* Button Small */
  --btn-sm-padding-y:   8px;
  --btn-sm-padding-x:   12px;
  --btn-sm-font-size:   0.83rem;
  --btn-sm-margin-top:  10px;

  /* Button Block */
  --btn-block-padding: 12px;

  /* Button Secondary */
  --btn-secondary-bg:        #ffffff;
  --btn-secondary-border:    var(--color-border);
  --btn-secondary-color:     #334155;
  --btn-secondary-hover-border: #d0d7e2;

  /* ========================================================================
     KOMPONENTEN — Form Controls
     ======================================================================== */

  --input-bg:             #ffffff;
  --input-border:         var(--color-border);
  --input-radius:         var(--radius-sm);
  --input-padding-y:      10px;
  --input-padding-x:      12px;
  --input-focus-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12);
  --input-disabled-bg:    #f8fafc;
  --input-disabled-text:  #94a3b8;
  --input-readonly-text:  var(--color-text-muted);

  /* kompatibel mit bestehenden forms.css-Variablen */
  --control-bg:             #ffffff;
  --control-border:         var(--color-border);
  --control-radius:         var(--radius-sm);
  --control-padding-y:      10px;
  --control-padding-x:      12px;
  --control-focus-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12);
  --control-disabled-bg:    #f8fafc;
  --control-disabled-text:  #94a3b8;

  /* ========================================================================
     KOMPONENTEN — Cards & Panels
     ======================================================================== */

  --card-padding:         20px;
  --card-padding-inner:   16px;
  --card-head-margin:     18px;
  --card-head-gap:        12px;
  --card-subhead-margin:  18px 0 12px;
  --card-bg:              var(--color-surface);
  --card-border:          1px solid var(--color-border);
  --card-radius:          var(--radius-lg);
  --card-shadow:          var(--shadow-card);

  /* ========================================================================
     KOMPONENTEN — Tables
     ======================================================================== */

  --table-cell-padding-y:    14px;
  --table-cell-padding-x:    12px;
  --table-cell-padding:      12px 10px;     /* tasks/meter */
  --table-cell-padding-tight: 11px 10px;    /* meter readings */
  --table-header-font-size:  0.90rem;
  --table-header-color:      #475569;
  --table-header-weight:     700;
  --table-border-color:      #edf1f6;
  --table-border:            1px solid #edf1f6;
  --table-active-bg:         #fafcff;

  /* ========================================================================
     KOMPONENTEN — Search Bars
     ======================================================================== */

  --search-padding-y:   10px;
  --search-padding-x:   12px;
  --search-border:      1px solid var(--color-border);
  --search-radius:      var(--r-md);
  --search-bg:          #ffffff;
  --search-icon-color:  #64748b;
  --search-font-size:   0.95rem;

  /* ========================================================================
     KOMPONENTEN — Icon Buttons (actions in tables)
     ======================================================================== */

  --icon-btn-size:        30px;
  --icon-btn-radius:      var(--r-sm);
  --icon-btn-bg:          #ffffff;
  --icon-btn-border:      1px solid var(--color-border);
  --icon-btn-color:       #475569;
  --icon-btn-hover-border:#d2dbe8;

  /* ========================================================================
     KOMPONENTEN — Tabs
     ======================================================================== */

  --tab-padding-y:     8px;
  --tab-padding-x:     10px;
  --tab-radius:        var(--r-sm);
  --tab-color:         #475569;
  --tab-active-bg:     #eef2ff;
  --tab-active-color:  var(--color-primary);
  --tab-font-weight:   700;

  /* ========================================================================
     KOMPONENTEN — Sidebar
     ======================================================================== */

  --sidebar-width:          280px;
  --sidebar-collapsed-width: 84px;
  --sidebar-item-padding-y: 12px;
  --sidebar-item-padding-x: 14px;
  --sidebar-item-radius:    var(--r-lg);
  --sidebar-item-color:     #334155;
  --sidebar-item-hover-bg:  #eef2ff;
  --sidebar-nav-gap:        6px;
  --sidebar-top-padding:    12px;
  --sidebar-bottom-padding: 12px;
  --sidebar-brand-padding:  14px 12px 16px;
  --sidebar-toggle-size:   38px;
  --sidebar-brand-icon-size: 36px;
  --sidebar-avatar-size:   38px;
  --sidebar-package-card-padding: 14px;
  --sidebar-profile-main-padding: 12px;

  /* ========================================================================
     KOMPONENTEN — Status Pills, Tags, Badges
     ======================================================================== */

  --pill-padding-y:    4px;
  --pill-padding-x:    8px;
  --pill-font-size:    0.78rem;
  --pill-font-weight:  700;
  --pill-radius:       var(--r-full);

  --badge-padding-y:   4px;
  --badge-padding-x:   9px;
  --badge-font-size:   0.78rem;

  /* ========================================================================
     KOMPONENTEN — Icon Tones
     ======================================================================== */

  --icon-tone-size:    42px;

  /* ========================================================================
     KOMPONENTEN — Dashboard Items
     ======================================================================== */

  --dashboard-item-padding:   10px;
  --dashboard-item-gap:       12px;
  --quick-action-padding:     15px;
  --panel-empty-padding:      18px 14px;
  --notification-btn-size:    44px;

  /* ========================================================================
     DENSITY — Platzhalter (noch nicht aktiv)
     Später: html[data-density="compact"] / html[data-density="comfortable"]
     Siehe Ende dieser Datei.
     ======================================================================== */

  /* ========================================================================
     TRANSITION — Globale Übergangsdauer
     ======================================================================== */

  --transition-fast:    140ms ease;
  --transition-normal:  160ms ease;

  /* ========================================================================
     GRADIENT
     ======================================================================== */

  --gradient-primary: linear-gradient(135deg, #356dff 0%, var(--color-primary) 100%);
}


/* ==========================================================================
   DENSITY: Compact (zurückhaltend — nur wenige, geprüfte Overrides)
   Aktivieren via <html data-density="compact">
   Wird erst NACH der Token-Migration wirksam geschaltet.
   ========================================================================== */

[data-density="compact"] {
  /* Typografie — eine Stufe kleiner */
  --text-2xs:    0.65rem;
  --text-xs:     0.69rem;
  --text-sm:     0.73rem;
  --text-sm2:    0.75rem;
  --text-sm3:    0.76rem;
  --text-sm4:    0.77rem;
  --text-sm5:    0.78rem;
  --text-sm6:    0.79rem;
  --text-sm7:    0.80rem;
  --text-sm8:    0.81rem;
  --text-sm9:    0.83rem;
  --text-base:   0.85rem;
  --text-base2:  0.87rem;
  --text-base3:  0.88rem;
  --text-base4:  0.90rem;
  --text-md:     0.93rem;
  --text-md2:    0.96rem;
  --text-md3:    0.97rem;
  --text-md4:    0.98rem;
  --text-md5:    1.02rem;
  --text-md6:    1.04rem;
  --text-lg:     1.10rem;
  --text-lg2:    1.12rem;
  --text-lg3:    1.14rem;
  --text-lg4:    1.20rem;
  --text-xl:     1.32rem;
  --text-xl2:    1.38rem;
  --text-xl3:    1.42rem;
  --text-xl4:    1.52rem;
  --text-2xl:    1.60rem;
  --text-2xl2:   1.70rem;
  --text-2xl3:   1.80rem;
  --text-3xl:    1.85rem;
  --text-3xl2:   2.00rem;
  --text-3xl3:   2.15rem;
  --text-4xl:    2.25rem;

  /* Spacing — eine Stufe kleiner */
  --space-0:   1px;
  --space-1:   2px;
  --space-2:   3px;
  --space-3:   4px;
  --space-4:   4px;
  --space-5:   6px;
  --space-6:   8px;
  --space-7:   8px;
  --space-8:   10px;
  --space-9:   11px;
  --space-10:  12px;
  --space-11:  12px;
  --space-12:  14px;
  --space-13:  16px;
  --space-14:  18px;
  --space-15:  20px;

  /* Komponenten */
  --btn-padding-y:      8px;
  --btn-padding-x:      12px;
  --btn-sm-padding-y:   6px;
  --btn-sm-padding-x:   10px;
  --btn-sm-font-size:   0.78rem;
  --btn-block-padding:  10px;
  --card-padding:       14px;
  --card-padding-inner: 12px;
  --card-head-margin:   14px;
  --card-head-gap:      10px;
  --table-cell-padding-y:   10px;
  --table-cell-padding-x:   10px;
  --table-cell-padding:     8px 8px;
  --table-cell-padding-tight: 8px 8px;
  --input-padding-y:    7px;
  --input-padding-x:    10px;
  --search-padding-y:   8px;
  --search-padding-x:   10px;
  --sidebar-item-padding-y: 10px;
  --sidebar-item-padding-x: 12px;
  --sidebar-nav-gap:    4px;
  --icon-tone-size:     36px;
  --icon-btn-size:      26px;
  --pill-padding-y:     3px;
  --pill-padding-x:     6px;
}


/* ==========================================================================
   DENSITY: Comfortable (mehr Luft — größere Abstände und Schriften)
   Aktivieren via <html data-density="comfortable">
   ========================================================================== */

[data-density="comfortable"] {
  /* Typografie — eine Stufe größer */
  --text-2xs:    0.78rem;
  --text-xs:     0.82rem;
  --text-sm:     0.86rem;
  --text-sm2:    0.88rem;
  --text-sm3:    0.89rem;
  --text-sm4:    0.90rem;
  --text-sm5:    0.91rem;
  --text-sm6:    0.92rem;
  --text-sm7:    0.93rem;
  --text-sm8:    0.94rem;
  --text-sm9:    0.96rem;
  --text-base:   1.00rem;
  --text-base2:  1.02rem;
  --text-base3:  1.03rem;
  --text-base4:  1.05rem;
  --text-md:     1.10rem;
  --text-md2:    1.13rem;
  --text-md3:    1.14rem;
  --text-md4:    1.15rem;
  --text-md5:    1.20rem;
  --text-md6:    1.22rem;
  --text-lg:     1.30rem;
  --text-lg2:    1.32rem;
  --text-lg3:    1.34rem;
  --text-lg4:    1.42rem;
  --text-xl:     1.60rem;
  --text-xl2:    1.65rem;
  --text-xl3:    1.72rem;
  --text-xl4:    1.82rem;
  --text-2xl:    1.95rem;
  --text-2xl2:   2.05rem;
  --text-2xl3:   2.15rem;
  --text-3xl:    2.25rem;
  --text-3xl2:   2.45rem;
  --text-3xl3:   2.60rem;
  --text-4xl:    2.80rem;

  /* Spacing — eine Stufe größer */
  --space-0:   4px;
  --space-1:   6px;
  --space-2:   8px;
  --space-3:   8px;
  --space-4:   10px;
  --space-5:   12px;
  --space-6:   14px;
  --space-7:   16px;
  --space-8:   16px;
  --space-9:   18px;
  --space-10:  20px;
  --space-11:  22px;
  --space-12:  24px;
  --space-13:  28px;
  --space-14:  32px;
  --space-15:  36px;

  /* Komponenten */
  --btn-padding-y:      14px;
  --btn-padding-x:      20px;
  --btn-sm-padding-y:   10px;
  --btn-sm-padding-x:   16px;
  --btn-sm-font-size:   0.90rem;
  --btn-block-padding:  16px;
  --card-padding:       28px;
  --card-padding-inner: 22px;
  --card-head-margin:   24px;
  --card-head-gap:      16px;
  --table-cell-padding-y:   18px;
  --table-cell-padding-x:   16px;
  --table-cell-padding:     16px 14px;
  --table-cell-padding-tight: 14px 14px;
  --input-padding-y:    14px;
  --input-padding-x:    16px;
  --search-padding-y:   12px;
  --search-padding-x:   16px;
  --sidebar-item-padding-y: 16px;
  --sidebar-item-padding-x: 18px;
  --sidebar-nav-gap:    8px;
  --icon-tone-size:     48px;
  --icon-btn-size:      34px;
  --pill-padding-y:     6px;
  --pill-padding-x:     10px;
}