/* ============================================
   KaufEinHorn Design Tokens
   Single Source of Truth
   ============================================ */

:root {
  /* --- Farben: Hintergrund --- */
  --ke-bg: #000000;
  --ke-surface: #111111;
  --ke-surface-2: #0a0a0a;
  --ke-surface-3: #1a1a1a;

  /* --- Farben: Text --- */
  --ke-text: #ffffff;
  --ke-text-muted: #b3b3b3;
  --ke-text-subtle: #666666;

  /* --- Farben: Rahmen --- */
  --ke-border: #26282a;
  --ke-border-light: #333333;

  /* --- Farben: Semantisch --- */
  --ke-primary: #3b82f6;
  --ke-primary-600: #2563eb;
  --ke-primary-focus: rgba(59, 130, 246, 0.35);
  --ke-primary-bg: rgba(59, 130, 246, 0.12);
  --ke-primary-border: rgba(59, 130, 246, 0.3);

  --ke-success: #22c55e;
  --ke-success-600: #16a34a;
  --ke-success-bg: #0a200a;
  --ke-success-border: #2a5a2a;

  --ke-danger: #ff5a2f;
  --ke-danger-600: #e14c23;
  --ke-danger-bg: #1a0505;
  --ke-danger-border: #4a1515;

  --ke-warning: #f8b33a;
  --ke-warning-600: #e09a20;
  --ke-warning-bg: #1a1500;
  --ke-warning-border: #4a3a00;

  --ke-info: #60a5fa;
  --ke-info-bg: rgba(96, 165, 250, 0.12);

  --ke-accent-purple: #7c3aed;

  /* --- Abstände --- */
  --ke-space-0: 0;
  --ke-space-1: 4px;
  --ke-space-2: 8px;
  --ke-space-3: 12px;
  --ke-space-4: 16px;
  --ke-space-5: 20px;
  --ke-space-6: 24px;
  --ke-space-8: 32px;
  --ke-space-10: 40px;
  --ke-space-12: 48px;

  /* --- Typografie --- */
  --ke-font-xs: 11px;
  --ke-font-sm: 12px;
  --ke-font: 14px;
  --ke-font-md: 15px;
  --ke-font-lg: 16px;
  --ke-font-xl: 20px;
  --ke-font-2xl: 24px;
  --ke-font-3xl: 30px;
  --ke-line: 1.35;
  --ke-line-tight: 1.2;
  --ke-line-relaxed: 1.6;

  /* --- Schriftarten --- */
  --ke-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ke-font-mono: 'SF Mono', 'Fira Code', monospace;

  /* --- Schriftgewicht --- */
  --ke-weight-normal: 400;
  --ke-weight-medium: 500;
  --ke-weight-semibold: 600;
  --ke-weight-bold: 700;

  /* --- Eckenradius --- */
  --ke-radius-xs: 2px;
  --ke-radius-sm: 4px;
  --ke-radius: 8px;
  --ke-radius-lg: 12px;
  --ke-radius-xl: 16px;
  --ke-radius-full: 9999px;
  --ke-border-radius: 8px;

  /* --- Schatten --- */
  --ke-shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --ke-shadow-s: 0 2px 6px rgba(0,0,0,0.28);
  --ke-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --ke-shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --ke-shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

  /* --- Z-Index Scale --- */
  --ke-z-base: 1;
  --ke-z-dropdown: 1000;
  --ke-z-sticky: 2000;
  --ke-z-overlay: 5000;
  --ke-z-modal: 10000;
  --ke-z-toast: 20000;
  --ke-z-scanner: 30000;

  /* --- Transitions --- */
  --ke-transition-fast: 120ms ease;
  --ke-transition: 180ms ease;
  --ke-transition-slow: 300ms ease;

  /* --- Layout --- */
  --ke-top-nav-height: 64px;
  --ke-bottom-nav-height: 60px;
  --ke-footer-height: 42px;
  --ke-content-safe-top: var(--ke-top-nav-height);
  --ke-content-safe-bottom: calc(var(--ke-bottom-nav-height) + var(--ke-footer-height));
  --layout-max-width: 1200px;

  /* --- Legacy Aliases (layout_nav.css uses these without ke- prefix) --- */
  --top-nav-height: var(--ke-top-nav-height);
  --bottom-nav-height: var(--ke-bottom-nav-height);
  --footer-height: var(--ke-footer-height);

  /* --- Legacy Aliases (shopping_list.css) --- */
  --background-color: var(--ke-bg);
  --darker-background-color: var(--ke-surface);
  --accent-color: var(--ke-primary);
  --text-color: var(--ke-text);
  --navbar-height: 80px;
  --navbar-position: sticky;
  --max-width: 100%;

  /* --- Overlay --- */
  --ke-overlay-bg: rgba(0,0,0,0.65);
  --ke-overlay-blur: blur(4px);

  /* ============================================
     Legacy --color-* Aliase
     Für Kompatibilität mit bestehenden Regeln
     die noch --color-* nutzen
     ============================================ */
  --color-bg-dark: #000000;
  --color-bg-light: #111111;
  --color-bg-lighter: #0a0a0a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-muted: #999999;
  --color-border: #26282a;
  --color-border-light: #333333;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-light: rgba(59, 130, 246, 0.15);
  --color-button-bg: #1a1a1a;
  --color-button-border: #333333;
  --color-button-text: #ffffff;
  --color-button-hover-bg: #2a2a2a;
  --color-input-bg: #0a0a0a;
  --color-input-border: #333333;
  --color-input-text: #ffffff;
  --color-success: #22c55e;
  --color-warning: #f8b33a;
  --color-warning-light: rgba(248, 179, 58, 0.2);
  --color-danger: #ff5a2f;
  --color-info: #60a5fa;
  --color-secondary: #64b5f6;
  --color-secondary-light: rgba(100, 181, 246, 0.1);

  --color-info-box-bg: rgba(59, 130, 246, 0.1);
  --color-info-box-border: #3b82f6;
  --color-info-box-text: #cccccc;
  --color-input-border-focus: #3b82f6;

  /* ============================================
     Legacy --spacing-* Aliase
     ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* ============================================
     Legacy --z-* Aliase
     ============================================ */
  --z-dropdown: 1000;
  --z-modal-backdrop: 10000;
  --z-modal-content: 10001;
  --z-toast: 800;
  --z-overlay: 12000;

  /* ============================================
     Legacy --font-size-* Aliase
     ============================================ */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-h3: 16px;
  --font-size-h2: 20px;
  --font-size-h1: 24px;
  --font-size-sm-md: 0.92rem;

  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --line-height-base: 1.5;
  --line-height-heading: 1.2;

  /* ============================================
     Legacy --border-radius-* Aliase
     ============================================ */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-md-lg: 10px;
  --border-radius-lg: 12px;
  --border-radius-lg-xl: 14px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;

  /* ============================================
     Legacy --shadow-* Aliase
     ============================================ */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);
  --shadow-xl: 0 15px 60px rgba(0,0,0,0.5);

  /* ============================================
     Legacy --transition-* Aliase
     ============================================ */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ============================================
     Legacy --opacity-* Aliase
     ============================================ */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.9;
  --opacity-active: 1;

  /* ============================================
     Legacy --layout-* Aliase
     ============================================ */
  --layout-container-width: 900px;
  --layout-sidebar-width: 250px;
}

/* ============================================
   Light Mode
   ============================================ */
[data-theme="light"] {
  --ke-bg: #f5f5f5;
  --ke-surface: #ffffff;
  --ke-surface-2: #e8e8e8;
  --ke-surface-3: #d5d5d5;
  --ke-text: #000000;
  --ke-text-muted: #666666;
  --ke-text-subtle: #999999;
  --ke-border: #dddddd;
  --ke-border-light: #cccccc;

  --ke-primary: #2563eb;
  --ke-primary-600: #1d4ed8;
  --ke-primary-focus: rgba(37, 99, 235, 0.25);
  --ke-primary-bg: rgba(37, 99, 235, 0.08);
  --ke-primary-border: rgba(37, 99, 235, 0.2);

  --ke-success: #16a34a;
  --ke-success-600: #15803d;
  --ke-success-bg: #dcfce7;
  --ke-success-border: #86efac;

  --ke-danger: #dc2626;
  --ke-danger-600: #b91c1c;
  --ke-danger-bg: #fee2e2;
  --ke-danger-border: #fecaca;

  --ke-warning: #d97706;
  --ke-warning-600: #b45309;
  --ke-warning-bg: #fef3c7;
  --ke-warning-border: #fde68a;

  --ke-info: #1976d2;
  --ke-info-bg: rgba(25, 118, 210, 0.08);

  --ke-shadow-xs: 0 1px 2px rgba(0,0,0,0.08);
  --ke-shadow-s: 0 2px 6px rgba(0,0,0,0.10);
  --ke-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --ke-shadow-lg: 0 8px 24px rgba(0,0,0,0.15);

  --ke-overlay-bg: rgba(0,0,0,0.4);

  /* Legacy light aliases */
  --color-bg-dark: #f5f5f5;
  --color-bg-light: #ffffff;
  --color-bg-lighter: #e8e8e8;
  --color-text-primary: #000000;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-border: #dddddd;
  --color-border-light: #cccccc;
  --color-primary: #2d7a2d;
  --color-primary-hover: #4CAF50;
  --color-primary-light: rgba(45, 122, 45, 0.1);
  --color-button-bg: #f0f0f0;
  --color-button-border: #cccccc;
  --color-button-text: #000000;
  --color-button-hover-bg: #e0e0e0;
  --color-input-bg: #ffffff;
  --color-input-border: #cccccc;
  --color-input-text: #000000;
  --color-success: #1a8a4a;
  --color-warning: #b88a00;
  --color-warning-light: rgba(184, 138, 0, 0.15);
  --color-danger: #c5221f;
  --color-info: #1976d2;
  --color-secondary: #1976d2;
  --color-secondary-light: rgba(25, 118, 210, 0.1);

  --color-info-box-bg: rgba(25, 118, 210, 0.08);
  --color-info-box-border: #1976d2;
  --color-info-box-text: #333333;
  --color-input-border-focus: #2d7a2d;
}