/* ─────────────────────────────────────────────────────────────────────────── *
 * Subtech CRM v2 - Design Tokens
 * Palette: 70% off-white | 20% Subtech Red #E40006 | 10% Midnight Black #0A0F1E
 * Font: DM Sans
 * ─────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');

:root {
  /* ── Typography ────────────────────────────────────────────────────── */
  --font: 'DM Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 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:   22px;
  --font-size-2xl:  28px;
  --font-size-3xl:  36px;

  /* ── Off-White Backgrounds (70%) ───────────────────────────────────── */
  --bg-body:      #F7F6F3;   /* Page background - warm off-white */
  --bg-primary:   #FAF9F6;   /* Main content area */
  --bg-secondary: #F3F2EF;   /* Slightly darker panels */
  --bg-tertiary:  #EBEBEA;   /* Borders and dividers area */
  --bg-card:      #FFFFFF;   /* Cards - pure white for lift */
  --bg-input:     #FFFFFF;
  --bg-hover:     #F0EFEC;   /* Row/item hover */
  --bg-selected:  #FFF5F5;   /* Selected row - red tint */

  /* ── Subtech Red (20%) ─────────────────────────────────────────────── */
  --red:           #E40006;
  --red-dark:      #C0000A;
  --red-darker:    #9B0008;
  --red-light:     rgba(228, 0, 6, 0.07);
  --red-light-md:  rgba(228, 0, 6, 0.12);
  --red-light-strong: rgba(228, 0, 6, 0.18);
  --red-50:        #FFF0F0;
  --red-100:       #FFD6D6;

  /* ── Midnight Black (10%) ──────────────────────────────────────────── */
  --dark:          #0A0F1E;   /* Sidebar, primary text */
  --dark-2:        #151B2E;   /* Sidebar hover */
  --dark-3:        #1E2538;   /* Dark card backgrounds */
  --dark-muted:    #3D4A5E;   /* Secondary dark text */

  /* ── Text Colors ───────────────────────────────────────────────────── */
  --text-primary:   #0A0F1E;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --text-disabled:  #D1D5DB;
  --text-white:     #FFFFFF;
  --text-red:       #E40006;

  /* ── Border & Dividers ─────────────────────────────────────────────── */
  --border:        #E5E4E1;
  --border-dark:   #D1D0CC;
  --border-input:  #D8D7D4;
  --border-focus:  #E40006;

  /* ── Semantic Colors ───────────────────────────────────────────────── */
  --green:         #16A34A;
  --green-light:   rgba(22, 163, 74, 0.08);
  --yellow:        #D97706;
  --yellow-light:  rgba(217, 119, 6, 0.08);
  --blue:          #2563EB;
  --blue-light:    rgba(37, 99, 235, 0.08);
  --purple:        #7C3AED;
  --purple-light:  rgba(124, 58, 237, 0.08);

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(10, 15, 30, 0.06);
  --shadow-sm:  0 1px 4px rgba(10, 15, 30, 0.08), 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-md:  0 4px 12px rgba(10, 15, 30, 0.10), 0 2px 4px rgba(10, 15, 30, 0.04);
  --shadow-lg:  0 8px 24px rgba(10, 15, 30, 0.12), 0 4px 8px rgba(10, 15, 30, 0.06);
  --shadow-xl:  0 16px 40px rgba(10, 15, 30, 0.15);
  --shadow-red: 0 4px 16px rgba(228, 0, 6, 0.25);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --sidebar-w:    252px;
  --sidebar-collapsed-w: 64px;
  --header-h:     56px;
  --content-max:  1280px;

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

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

  /* ── Transitions ───────────────────────────────────────────────────── */
  --transition: 0.18s ease;
  --transition-fast: 0.1s ease;
  --transition-slow: 0.3s ease;
}