/* ==========================================================================
   NeumERP Design Tokens — single source of truth for every surface
   (landing page, auth pages, and the application shell).
   Source: "NeumERP Brand" identity v1 (Oct 2026) — Modular N concept.
   Do not hard-code colors elsewhere; reference these variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand — Neum Indigo (#2A36B1 primary), Midnight (#0E1340 dark ground) */
  --nm-brand-50:  #eef0fb;
  --nm-brand-100: #dfe2f7;
  --nm-brand-200: #c1c6ef;
  --nm-brand-300: #969fe2;
  --nm-brand-400: #6470d0;
  --nm-brand-500: #3c49c0;
  --nm-brand-600: #2a36b1;
  --nm-brand-700: #222c93;
  --nm-brand-800: #1c2475;
  --nm-brand-900: #151b57;
  --nm-brand-950: #0e1340;

  /* Accent — Signal Teal: the "module being added". Use sparingly
     (highlights, live/AI indicators, success-adjacent accents, links on hover). */
  --nm-accent-50:  #e7f8f5;
  --nm-accent-100: #c6efe7;
  --nm-accent-500: #13b89e;
  --nm-accent-600: #0f9a84;
  --nm-accent-700: #0b7f6d;   /* teal text on light surfaces */
  --nm-accent-on-dark: #3fd6bc;
  --nm-accent-on-dark-2: #7fe6d3;

  /* Neutrals — Ink-tinted (Ink #10142E, Paper #F5F6FA) */
  --nm-gray-0:   #ffffff;
  --nm-gray-25:  #fafbfd;
  --nm-gray-50:  #f5f6fa;
  --nm-gray-100: #edeff5;
  --nm-gray-200: #e3e5ee;
  --nm-gray-300: #d5d8e4;
  --nm-gray-400: #a3a8c3;
  --nm-gray-500: #7a80a0;
  --nm-gray-600: #5a6080;
  --nm-gray-700: #41476a;
  --nm-gray-800: #262b4a;
  --nm-gray-900: #10142e;

  /* Semantic */
  --nm-success-50: #e7f8f5; --nm-success-500: #13b89e; --nm-success-700: #0b7f6d;
  --nm-warning-50: #fff8eb; --nm-warning-500: #f2a10f; --nm-warning-700: #a15c07;
  --nm-danger-50:  #fdf1f1; --nm-danger-500:  #e5484d; --nm-danger-700:  #b0272d;
  --nm-info-50:    #eef0fb; --nm-info-500:    #3c49c0; --nm-info-700:    #222c93;

  /* Surfaces & text */
  --nm-bg:            var(--nm-gray-50);
  --nm-surface:       var(--nm-gray-0);
  --nm-surface-muted: var(--nm-gray-25);
  --nm-border:        var(--nm-gray-200);
  --nm-border-strong: var(--nm-gray-300);
  --nm-text:          var(--nm-gray-900);
  --nm-text-2:        var(--nm-gray-700);
  --nm-text-3:        var(--nm-gray-600);
  --nm-primary:       var(--nm-brand-600);
  --nm-primary-hover: var(--nm-brand-700);
  --nm-primary-soft:  var(--nm-brand-50);
  --nm-link:          var(--nm-brand-600);
  --nm-link-hover:    var(--nm-accent-500);
  --nm-focus-ring:    0 0 0 4px rgba(42, 54, 177, .18);

  /* Sidebar / dark ground — Midnight */
  --nm-sidebar-bg:      #0e1340;
  --nm-sidebar-bg-2:    #151b57;
  --nm-sidebar-text:    #b8bde0;
  --nm-sidebar-muted:   #9aa0c8;
  --nm-sidebar-active:  #ffffff;
  --nm-sidebar-accent:  var(--nm-accent-on-dark);
  --nm-sidebar-hover:   rgba(255, 255, 255, .06);
  --nm-sidebar-width:   264px;

  /* Typography — Manrope (brand, Latin) + IBM Plex Sans Arabic (Arabic glyphs fall through) */
  --nm-font: 'Manrope', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nm-font-ar: var(--nm-font);
  --nm-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nm-tracking-tight: -0.03em;   /* headings & wordmark */
  --nm-fs-xs: 12px; --nm-fs-sm: 13px; --nm-fs-base: 14px; --nm-fs-md: 16px;
  --nm-fs-lg: 18px; --nm-fs-xl: 22px; --nm-fs-2xl: 28px; --nm-fs-3xl: 36px; --nm-fs-display: 56px;

  /* Radius, spacing, elevation, motion */
  --nm-radius-sm: 6px; --nm-radius: 8px; --nm-radius-lg: 12px; --nm-radius-xl: 16px; --nm-radius-2xl: 18px; --nm-radius-full: 999px;
  --nm-space-1: 4px; --nm-space-2: 8px; --nm-space-3: 12px; --nm-space-4: 16px;
  --nm-space-5: 20px; --nm-space-6: 24px; --nm-space-8: 32px; --nm-space-10: 40px; --nm-space-12: 48px;
  --nm-shadow-xs: 0 1px 2px rgba(16, 20, 46, .05);
  --nm-shadow-sm: 0 1px 3px rgba(16, 20, 46, .08), 0 1px 2px rgba(16, 20, 46, .04);
  --nm-shadow-md: 0 4px 12px -2px rgba(16, 20, 46, .08), 0 2px 4px -2px rgba(16, 20, 46, .04);
  --nm-shadow-lg: 0 12px 40px rgba(16, 20, 46, .08);
  --nm-shadow-xl: 0 8px 30px rgba(16, 20, 46, .12);
  --nm-shadow-brand: 0 8px 24px -6px rgba(42, 54, 177, .45);
  --nm-ease: cubic-bezier(.2, .7, .2, 1);
  --nm-dur: 160ms;
}