/* ============================================
   ECHO B2B Admin Console — Design Tokens
   ============================================ */

:root {
  --color-brand-navy:        #050f1e;
  --color-brand-blue:        #2563EB;
  --color-brand-blue-light:  #3B82F6;
  --color-brand-blue-pale:   #EFF6FF;
  --color-brand-teal:        #0D9488;
  --color-brand-teal-pale:   #F0FDFA;
  --color-success:           #059669;
  --color-success-bg:        #ECFDF5;
  --color-warning:           #D97706;
  --color-warning-bg:        #FFFBEB;
  --color-danger:            #DC2626;
  --color-danger-bg:         #FEF2F2;
  --color-info:              #2563EB;
  --color-info-bg:           #EFF6FF;
  --color-gray-50:           #F8FAFC;
  --color-gray-100:          #F1F5F9;
  --color-gray-200:          #E2E8F0;
  --color-gray-300:          #CBD5E1;
  --color-gray-400:          #94A3B8;
  --color-gray-500:          #64748B;
  --color-gray-600:          #475569;
  --color-gray-700:          #334155;
  --color-gray-800:          #1E293B;
  --color-gray-900:          #0F172A;
  --color-bg-body:           #F7F9FC;
  --color-bg-card:           #FFFFFF;
  --color-bg-sidebar:        #FFFFFF;
  --color-border:            #E2E8F0;
  --color-border-focus:      #3B82F6;
  --font-family-base:        'DM Sans', 'Inter', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-size-xs:            11px;
  --font-size-sm:            12px;
  --font-size-base:          14px;
  --font-size-md:            15px;
  --font-size-lg:            16px;
  --font-size-xl:            18px;
  --font-size-2xl:           20px;
  --font-size-3xl:           24px;
  --font-size-kpi:           32px;
  --font-size-kpi-lg:        40px;
  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --line-height-tight:       1.2;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.7;
  --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;
  --space-16:  64px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.25);
  --sidebar-width:           240px;
  --header-height:           64px;
  --content-max-width:       1200px;
  --content-padding:         var(--space-6);
  --transition-fast:         150ms ease;
  --transition-base:         200ms ease;
  --transition-slow:         300ms ease;
  --z-sidebar:    100;
  --z-header:     200;
  --z-modal:      500;
  --z-tooltip:    600;
}