/* ============================================================
   JARVIS Design Tokens — Phase 4A P0
   Quelle: docs/DESIGN_TOKENS.md
   Alle Werte exklusiv hier definieren.
   Keine Hex-Werte außerhalb dieser Datei.
   ============================================================ */

/* ============================================================
   A.1 PRIMITIVE FARB-PALETTE
   Nur für Token-Definitionen; Komponenten verwenden semantische
   Tokens, nie primitive Werte direkt.
   ============================================================ */
:root {
  /* Neutrals */
  --primitive-neutral-0:   #ffffff;
  --primitive-neutral-50:  #f8f9fa;
  --primitive-neutral-100: #f1f3f5;
  --primitive-neutral-200: #e9ecef;
  --primitive-neutral-300: #dee2e6;
  --primitive-neutral-400: #ced4da;
  --primitive-neutral-500: #adb5bd;
  --primitive-neutral-600: #868e96;
  --primitive-neutral-700: #495057;
  --primitive-neutral-800: #343a40;
  --primitive-neutral-850: #2b3035;
  --primitive-neutral-900: #1a1d21;
  --primitive-neutral-950: #0d0f11;

  /* Indigo (Markenfarbe / Primäraktion) */
  --primitive-indigo-50:   #eef2ff;
  --primitive-indigo-100:  #e0e7ff;
  --primitive-indigo-200:  #c7d2fe;
  --primitive-indigo-300:  #a5b4fc;
  --primitive-indigo-400:  #818cf8;
  --primitive-indigo-500:  #6366f1;
  --primitive-indigo-600:  #4f46e5;
  --primitive-indigo-700:  #4338ca;
  --primitive-indigo-800:  #3730a3;
  --primitive-indigo-900:  #312e81;

  /* Grün (Erfolg) */
  --primitive-green-50:    #f0fdf4;
  --primitive-green-100:   #dcfce7;
  --primitive-green-500:   #22c55e;
  --primitive-green-600:   #16a34a;
  --primitive-green-700:   #15803d;
  --primitive-green-800:   #166534;
  --primitive-green-900:   #14532d;

  /* Amber (Warnung) */
  --primitive-amber-50:    #fffbeb;
  --primitive-amber-100:   #fef3c7;
  --primitive-amber-500:   #f59e0b;
  --primitive-amber-600:   #d97706;
  --primitive-amber-700:   #b45309;
  --primitive-amber-800:   #92400e;

  /* Rot (Fehler / Gefahr) */
  --primitive-red-50:      #fef2f2;
  --primitive-red-100:     #fee2e2;
  --primitive-red-500:     #ef4444;
  --primitive-red-600:     #dc2626;
  --primitive-red-700:     #b91c1c;
  --primitive-red-800:     #991b1b;
  --primitive-red-900:     #7f1d1d;

  /* Violet (KI-Akzent) */
  --primitive-violet-50:   #f5f3ff;
  --primitive-violet-100:  #ede9fe;
  --primitive-violet-400:  #a78bfa;
  --primitive-violet-500:  #8b5cf6;
  --primitive-violet-600:  #7c3aed;
  --primitive-violet-700:  #6d28d9;
  --primitive-violet-900:  #4c1d95;
}

/* ============================================================
   A.2 SEMANTISCHE FARB-TOKENS — Light Mode (Standard)
   ============================================================ */
:root {
  /* Hintergründe */
  --color-bg-canvas:      #f1f3f5;
  --color-bg-surface:     #ffffff;
  --color-bg-elevated:    #ffffff;
  --color-bg-sunken:      #e9ecef;
  --color-bg-nav:         #1a1d21;
  --color-bg-nav-active:  #2b3035;
  --color-bg-overlay:     rgba(0, 0, 0, 0.5);

  /* Text */
  --color-text-primary:   #1a1d21;
  --color-text-secondary: #495057;
  --color-text-tertiary:  #868e96;
  --color-text-disabled:  #adb5bd;
  --color-text-inverse:   #ffffff;
  --color-text-nav:       #ced4da;
  --color-text-nav-active:#ffffff;

  /* Rahmen */
  --color-border-default: #dee2e6;
  --color-border-strong:  #adb5bd;
  --color-border-focus:   #6366f1;
  --color-border-error:   #dc2626;

  /* Aktionen (Primär = Indigo) */
  --color-action-primary:          #6366f1;
  --color-action-primary-hover:    #4f46e5;
  --color-action-primary-active:   #4338ca;
  --color-action-primary-text:     #ffffff;
  --color-action-secondary:        #f1f3f5;
  --color-action-secondary-border: #dee2e6;
  --color-action-secondary-hover:  #e9ecef;
  --color-action-secondary-text:   #1a1d21;
  --color-action-ghost-hover:      #f1f3f5;
  --color-action-danger:           #dc2626;
  --color-action-danger-hover:     #b91c1c;
  --color-action-danger-text:      #ffffff;

  /* Status */
  --color-status-success:          #16a34a;
  --color-status-success-bg:       #f0fdf4;
  --color-status-success-border:   #22c55e;
  --color-status-warning:          #d97706;
  --color-status-warning-bg:       #fffbeb;
  --color-status-warning-border:   #f59e0b;
  --color-status-danger:           #dc2626;
  --color-status-danger-bg:        #fef2f2;
  --color-status-danger-border:    #ef4444;
  --color-status-info:             #4f46e5;
  --color-status-info-bg:          #eef2ff;
  --color-status-info-border:      #6366f1;
  --color-status-neutral:          #495057;
  --color-status-neutral-bg:       #f1f3f5;
  --color-status-neutral-border:   #ced4da;

  /* KI-spezifisch */
  --color-ai-accent:      #7c3aed;
  --color-ai-bg:          #f5f3ff;
  --color-ai-border:      #a78bfa;
  --color-ai-text:        #4c1d95;

  /* Interaktion */
  --color-focus-ring:     #6366f1;
  --color-selection:      #eef2ff;
  --color-hover-overlay:  rgba(0, 0, 0, 0.04);

  /* Diagrammserien */
  --color-chart-1:        #6366f1;
  --color-chart-2:        #22c55e;
  --color-chart-3:        #f59e0b;
  --color-chart-4:        #ef4444;
  --color-chart-5:        #8b5cf6;
  --color-chart-6:        #0ea5e9;
}

/* ============================================================
   B. TYPOGRAFIE
   ============================================================ */
:root {
  --font-family-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace;

  /* Schriftgrößen-Skala */
  --font-size-2xs: 0.6875rem;  /*  11px */
  --font-size-xs:  0.75rem;    /*  12px */
  --font-size-sm:  0.875rem;   /*  14px */
  --font-size-md:  1rem;       /*  16px */
  --font-size-lg:  1.125rem;   /*  18px */
  --font-size-xl:  1.25rem;    /*  20px */
  --font-size-2xl: 1.5rem;     /*  24px */
  --font-size-3xl: 1.875rem;   /*  30px */
  --font-size-4xl: 2.25rem;    /*  36px */

  /* Zeilenhöhen */
  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;

  /* Schriftgewichte */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Buchstabenabstände */
  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
}

/* ============================================================
   C. SPACING-SYSTEM (4px-Raster)
   ============================================================ */
:root {
  --space-0:    0px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --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;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
}

/* ============================================================
   D. GRÖSSEN
   ============================================================ */
:root {
  /* Button-Höhen */
  --size-button-sm: 32px;
  --size-button-md: 40px;
  --size-button-lg: 48px;

  /* Eingabefeld-Höhen */
  --size-input-sm:  32px;
  --size-input-md:  40px;
  --size-input-lg:  48px;

  /* Touch-Mindestgröße (WCAG 2.5.5) */
  --size-touch-target: 44px;

  /* Icon-Größen */
  --size-icon-xs:  12px;
  --size-icon-sm:  16px;
  --size-icon-md:  20px;
  --size-icon-lg:  24px;
  --size-icon-xl:  32px;

  /* Avatar-Größen */
  --size-avatar-sm:  24px;
  --size-avatar-md:  32px;
  --size-avatar-lg:  40px;
  --size-avatar-xl:  64px;

  /* Layout */
  --size-sidebar-open:    256px;
  --size-sidebar-compact:  64px;
  --size-topbar-height:    56px;

  /* Modals */
  --size-modal-sm:  400px;
  --size-modal-md:  560px;
  --size-modal-lg:  760px;
  --size-modal-xl:  960px;

  /* Inhaltsbreiten */
  --size-content-max:  1280px;
  --size-content-md:    720px;
  --size-content-sm:    480px;

  /* Tabellenzeilen */
  --size-row-sm:   40px;
  --size-row-md:   52px;
  --size-row-lg:   64px;
  --size-row-xl:   80px;
}

/* ============================================================
   E. RAHMEN UND RADIEN
   ============================================================ */
:root {
  /* Border-Breiten */
  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  3px;

  /* Border-Radien */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;
}

/* ============================================================
   F. SCHATTEN UND Z-INDEX
   Pixel-Werte in Schatten sind hier erlaubt (Ausnahme).
   ============================================================ */
:root {
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35);

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-critical: 600;
}

/* ============================================================
   G. ANIMATIONEN
   ============================================================ */
:root {
  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-enter:   250ms;
  --duration-exit:    200ms;

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:  linear;
}

/* ============================================================
   H. BREAKPOINTS (als Custom Properties zur Dokumentation)
   In @media-Regeln müssen direkte px-Werte verwendet werden.
   ============================================================ */
:root {
  --bp-xs:   375px;
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}

/* ============================================================
   FOCUS-RING TOKENS
   ============================================================ */
:root {
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--color-focus-ring);
}