/* ==========================================================================
   DELIKATESSA B2B MOBILE APPLICATION - DESIGN TOKENS
   Corporate German Wholesale Identity & Mediterranean Fine Foods
   ========================================================================== */

:root {
  /* Brand Palette - Deep Mediterranean Slate & Delikatessa Emerald */
  --primary-950: #0a0f1d;
  --primary-900: #0f172a;
  --primary-800: #1e293b;
  --primary-700: #334155;
  --primary-600: #475569;
  --primary-500: #64748b;
  --primary-400: #94a3b8;
  --primary-200: #e2e8f0;
  --primary-100: #f1f5f9;
  --primary-50:  #f8fafc;

  /* Accent - Mediterranean Olive & Emerald */
  --accent-900: #022c22;
  --accent-800: #064e3b;
  --accent-700: #047857;
  --accent-600: #059669;
  --accent-500: #10b981;
  --accent-400: #34d399;
  --accent-200: #a7f3d0;
  --accent-100: #d1fae5;
  --accent-50:  #ecfdf5;

  /* Accent Gold / Amber - Deposit & Attention */
  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-100: #fef3c7;
  --amber-50:  #fffbeb;

  /* Status Colors */
  --status-info-bg: #eff6ff;
  --status-info-text: #1d4ed8;
  --status-info-border: #bfdbfe;

  --status-success-bg: #ecfdf5;
  --status-success-text: #065f46;
  --status-success-border: #a7f3d0;

  --status-warning-bg: #fffbeb;
  --status-warning-text: #92400e;
  --status-warning-border: #fde68a;

  --status-danger-bg: #fef2f2;
  --status-danger-text: #991b1b;
  --status-danger-border: #fecaca;

  /* Surface & Glassmorphism */
  --surface-base: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-card: #ffffff;
  --surface-border: #e2e8f0;
  --surface-border-strong: #cbd5e1;

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(14px);

  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Elevations & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --shadow-device: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.1);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Device frame dimensions */
  --device-width: 412px;
  --device-height: min(800px, 92vh);
}