/* ════════════════════════════════════════════════════════════
   reelity PM — Design Tokens (zentrale Quelle für alle Seiten)
   Eingebunden von: app.html, index.html, client.html
   Stand: Redesign Stufe 1 (10.06.2026)
   ════════════════════════════════════════════════════════════ */

/* ─── Inter · self-hosted Variable Font ──────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── Primary · Apple Blue #007AFF ───────────────────── */
  --color-primary:          #007AFF;
  --color-primary-hover:    #1485FF;
  --color-primary-active:   #0066D6;
  --color-primary-disabled: #99CAFF;
  --color-primary-tint:     #EBF4FF;   /* helle Fläche hinter aktiven Elementen */
  --color-primary-ring:     rgba(0, 122, 255, 0.25);

  /* ─── Neutrale Grauskala (Apple-abgeleitet) ──────────── */
  --gray-50:  #F5F5F7;
  --gray-100: #E8E8ED;
  --gray-200: #D2D2D7;
  --gray-300: #C7C7CC;
  --gray-400: #AEAEB2;
  --gray-500: #86868B;
  --gray-600: #6E6E73;
  --gray-700: #48484A;
  --gray-800: #2C2C2E;
  --gray-900: #1D1D1F;

  /* ─── Surfaces & Text ────────────────────────────────── */
  --color-canvas:         var(--gray-50);
  --color-surface:        #FFFFFF;
  --color-surface-2:      var(--gray-50);
  --color-surface-3:      var(--gray-100);
  --color-border:         var(--gray-100);
  --color-border-strong:  var(--gray-200);
  --color-text:           var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary:  var(--gray-500);

  /* ─── Semantik ───────────────────────────────────────── */
  --color-success:     #34C759;
  --color-success-bg:  rgba(52, 199, 89, 0.10);
  --color-warning:     #FF9F0A;
  --color-warning-bg:  rgba(255, 159, 10, 0.10);
  --color-danger:      #FF3B30;
  --color-danger-bg:   rgba(255, 59, 48, 0.08);

  /* ─── Typografie · Inter ─────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --leading-tight:  1.15;
  --leading-normal: 1.45;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* ─── Spacing · 4px-Raster ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── Radien ─────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* ─── Schatten · dezent, Apple-Style ─────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* ─── Motion ─────────────────────────────────────────── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;

  /* ─── Layout ─────────────────────────────────────────── */
  --sidebar-w:    224px;
  --topbar-h:     54px;
  --page-padding: 28px;

  /* ════════════════════════════════════════════════════════
     ALIAS-LAYER — Bestands-Variablennamen (app.html)
     Wird in Stufe 2 schrittweise abgebaut. Neue Styles nutzen
     ausschließlich die kanonischen Namen oben.
     ════════════════════════════════════════════════════════ */
  --canvas:      var(--color-canvas);
  --surface:     var(--color-surface);
  --surface2:    var(--color-surface-2);
  --surface3:    var(--color-surface-3);
  --border:      var(--color-border);
  --border2:     var(--color-border-strong);
  --divider:     var(--color-border);
  --text:        var(--color-text);
  --text1:       var(--color-text);
  --text2:       var(--color-text-secondary);
  --text3:       var(--color-text-tertiary);
  --blue:        var(--color-primary);
  --blue-hover:  var(--color-primary-hover);
  --blue-active: var(--color-primary-active);
  --blue-bg:     var(--color-primary-tint);
  --blue-ring:   var(--color-primary-ring);
  --accent:      var(--color-primary);
  --green:       var(--color-success);
  --green-bg:    var(--color-success-bg);
  --warning:     var(--color-warning);
  --warning-bg:  var(--color-warning-bg);
  --red:         var(--color-danger);
  --red-bg:      var(--color-danger-bg);
  --r:           var(--radius-md);
  --r-lg:        var(--radius-lg);
  --r-sm:        var(--radius-sm);
  --r-xs:        var(--radius-xs);
  --r-pill:      var(--radius-pill);
  --s1:          var(--shadow-1);
  --s2:          var(--shadow-2);
  --s3:          var(--shadow-3);
  --s4:          var(--shadow-4);
  --sb-bg:       var(--color-surface);
  --sb-text:     var(--color-text);
  --sb-text2:    var(--color-text-tertiary);
  --sb-border:   var(--color-border);
  --sb-hover:    rgba(0, 0, 0, 0.04);
  --sb-active-bg: var(--color-primary-tint);
  --sb-active:   var(--color-primary);
  --card:        var(--color-surface);
  --hover:       rgba(0, 0, 0, 0.04);
}