/* ============================================================================
   SOCIOMONKEY — GLOBAL DESIGN SYSTEM TOKENS
   ============================================================================
   Single source of truth for all visual constants.
   Tenant customisation is STRICTLY LIMITED to the five --tenant-* variables.
   Everything else is Sociomonkey brand and must not be overridden per-tenant.
   ============================================================================ */

/* Google Font preload hint (import handled in index.html) */

:root {

  /* ── Sociomonkey Brand ──────────────────────────────────────────────────── */
  --sm-brand:        #de2e2e;   /* primary red                               */
  --sm-brand-dark:   #c22828;   /* red hover / pressed                       */
  --sm-brand-soft:   rgba(222,46,46,.10); /* tinted bg for badges/chips       */

  /* ── Global Ink Scale ───────────────────────────────────────────────────── */
  --sm-ink:          #111111;   /* headings, primary text, CTA buttons       */
  --sm-ink-soft:     #2a2a2a;   /* button hover                              */
  --sm-body:         #444444;   /* paragraph / body copy                     */
  --sm-muted:        #888888;   /* helper text, timestamps, placeholders     */
  --sm-disabled:     #bbbbbb;   /* disabled controls                         */

  /* ── Surfaces & Structure ───────────────────────────────────────────────── */
  --sm-surface:      #ffffff;   /* page background — pure white              */
  --sm-surface-alt:  #ffffff;   /* card / panel background                   */
  --sm-divider:      #e4e4e4;   /* borders, separators                       */
  --sm-divider-soft: #f0f0ee;   /* subtle row dividers                       */

  /* ── Tenant Override Slots (ONLY these five may be set per-tenant) ─────── */
  /* Defaults mirror the Sociomonkey brand so the platform looks correct      */
  /* when no tenant is loaded.                                                 */
  --tenant-accent:      var(--sm-brand);
  --tenant-accent-dark: var(--sm-brand-dark);
  --tenant-accent-soft: var(--sm-brand-soft);
  --tenant-sidebar-bg:  #1f2a37; /* enterprise slate — tenant can override */
  --tenant-login-bg:    #ffffff; /* login page background                    */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system,
                BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ── Spacing Scale ───────────────────────────────────────────────────────── */
  --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-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Elevation / Shadows ─────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px  rgba(17,17,17,.04);
  --shadow-sm:  0 1px 4px  rgba(17,17,17,.07);
  --shadow-md:  0 4px 12px rgba(17,17,17,.09);
  --shadow-lg:  0 8px 24px rgba(17,17,17,.11);
  --shadow-xl:  0 16px 48px rgba(17,17,17,.13);
  --shadow-card: 0 0 0 1px rgba(17,17,17,.07), 0 2px 8px rgba(17,17,17,.05);

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(.4,0,.2,1);
  --ease-out:     cubic-bezier(0,0,.2,1);
  --ease-in:      cubic-bezier(.4,0,1,1);
  --duration-fast:   100ms;
  --duration-base:   160ms;
  --duration-slow:   260ms;

  /* ── Z-Index Layers ──────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-sticky:  50;
  --z-sidebar: 100;
  --z-topbar:  110;
  --z-drawer:  200;
  --z-overlay: 900;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-tooltip: 3000;

  /* ── Semantic Feedback Colours ───────────────────────────────────────────── */
  --color-success:      #16a34a;
  --color-success-bg:   #dcfce7;
  --color-success-border:#86efac;
  --color-warning:      #ca8a04;
  --color-warning-bg:   #fef9c3;
  --color-warning-border:#fde047;
  --color-error:        #dc2626;
  --color-error-bg:     #fee2e2;
  --color-error-border: #fca5a5;
  --color-info:         #0284c7;
  --color-info-bg:      #e0f2fe;
  --color-info-border:  #7dd3fc;
}