/* WorkMesh Design Tokens — v1.0
 * Source: workmesh-brand-system-complete/05-design-tokens/workmesh-tokens.css
 * This is the only file that should define raw color/spacing values.
 * All other stylesheets reference these CSS custom properties.
 */

:root {
  /* ─── Primary Navy Scale ─────────────────────────── */
  --wm-color-navy-900:  #041D45;
  --wm-color-navy-800:  #082B5F;  /* Primary brand color */
  --wm-color-navy-700:  #0D3F8A;
  --wm-color-navy-600:  #1350A8;
  --wm-color-navy-500:  #1B6BC5;  /* Accent blue / CTAs */
  --wm-color-navy-400:  #4B96E0;
  --wm-color-navy-300:  #90BEF0;
  --wm-color-navy-200:  #C4D9F8;
  --wm-color-navy-100:  #E2EEFB;
  --wm-color-navy-50:   #EFF6FF;

  /* ─── Special Surfaces ───────────────────────────── */
  --wm-color-icon-bg:   #213B52;  /* App icon background — spec-locked */
  --wm-color-dark-bg:   #17191D;  /* Dark theme canvas */

  /* ─── Semantic ───────────────────────────────────── */
  --wm-color-success:   #0D9F6F;
  --wm-color-warning:   #D97706;
  --wm-color-error:     #DC2626;
  --wm-color-info:      #1B6BC5;

  /* ─── Neutral Scale ──────────────────────────────── */
  --wm-color-grey-950:  #0A0E17;
  --wm-color-grey-900:  #111827;
  --wm-color-grey-800:  #1F2937;
  --wm-color-grey-700:  #374151;
  --wm-color-grey-600:  #4B5563;
  --wm-color-grey-500:  #6B7280;
  --wm-color-grey-400:  #9CA3AF;
  --wm-color-grey-300:  #D1D5DB;
  --wm-color-grey-200:  #E5E7EB;
  --wm-color-grey-100:  #F3F4F6;
  --wm-color-grey-50:   #F9FAFB;
  --wm-color-white:     #FFFFFF;

  /* ─── Convenience aliases ────────────────────────── */
  --wm-brand:           var(--wm-color-navy-800);
  --wm-accent:          var(--wm-color-navy-500);

  /* ─── Spacing (4px base) ─────────────────────────── */
  --wm-space-1:    4px;
  --wm-space-2:    8px;
  --wm-space-3:   12px;
  --wm-space-4:   16px;
  --wm-space-5:   20px;
  --wm-space-6:   24px;
  --wm-space-8:   32px;
  --wm-space-10:  40px;
  --wm-space-12:  48px;
  --wm-space-16:  64px;
  --wm-space-20:  80px;
  --wm-space-24:  96px;

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

  /* ─── Shadows ────────────────────────────────────── */
  --wm-shadow-sm:  0 1px 3px rgba(8,43,95,0.08), 0 1px 2px rgba(8,43,95,0.05);
  --wm-shadow-md:  0 4px 6px rgba(8,43,95,0.07), 0 2px 4px rgba(8,43,95,0.05);
  --wm-shadow-lg:  0 10px 15px rgba(8,43,95,0.10), 0 4px 6px rgba(8,43,95,0.05);
  --wm-shadow-xl:  0 20px 25px rgba(8,43,95,0.10), 0 10px 10px rgba(8,43,95,0.04);

  /* ─── Z-index ────────────────────────────────────── */
  --wm-z-dropdown:  100;
  --wm-z-modal:     200;
  --wm-z-toast:     300;
  --wm-z-tooltip:   400;
}