/* ============================================================
   DYNAPRICE DESIGN SYSTEM — CSS VARIABLES
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --color-primary-dark:   #071626;
  --color-accent:         #ff7847;
  --color-accent-hover:   #e8663a;
  --color-accent-light:   rgba(255, 120, 71, 0.12);

  --color-bg-page:        #f7f8fa;
  --color-bg-content:     #ffffff;
  --color-bg-panel:       #f1f3f5;
  --color-bg-sidebar:     #071626;
  --color-bg-sidebar-hover: rgba(255,255,255,0.07);
  --color-bg-sidebar-active: rgba(255, 120, 71, 0.18);

  --color-text-primary:   #1a1a2e;
  --color-text-secondary: #6b7280;
  --color-text-tertiary:  #9ca3af;
  --color-text-inverse:   #ffffff;
  --color-text-sidebar:   rgba(255,255,255,0.75);
  --color-text-sidebar-active: #ffffff;

  --color-border:         #e5e7eb;
  --color-border-hover:   #d1d5db;

  /* ── Status Colors ── */
  --color-status-offered:   #3b82f6;
  --color-status-sold:      #10b981;
  --color-status-on-hold:   #f59e0b;
  --color-status-invoiced:  #8b5cf6;
  --color-status-archived:  #6b7280;

  /* ── Portal Badge Colors ── */
  --color-portal-keysurplus:            #0ea5e9;
  --color-portal-4semi:                 #8b5cf6;
  --color-portal-labjupiter:            #10b981;
  --color-portal-machinetoolmarket:     #f59e0b;
  --color-portal-wwx:                   #ef4444;
  --color-portal-processequipmentmarket:#6366f1;

  /* ── Typography ── */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-size-xs:         11px;
  --font-size-sm:         12px;
  --font-size-base:       14px;
  --font-size-md:         15px;
  --font-size-lg:         18px;
  --font-size-xl:         24px;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-base:     1.5;

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

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.16);

  /* ── Transitions ── */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;

  /* ── Layout ── */
  --sidebar-width:         220px;
  --sidebar-collapsed-width: 56px;
  --header-height:         56px;
  --content-max-width:     1600px;
}