@nextsparkjs/theme-crm 0.1.0-beta.1

package/styles/globals.css

@@ -0,0 +1,576 @@
+/**
+ * CRM Theme - Global Styles
+ *
+ * Professional, data-focused design for enterprise CRM.
+ * Clean interface with emphasis on data visualization.
+ *
+ * Design System: Purple/Violet primary, Plus Jakarta Sans typography
+ */
+
+/* ============================================================================
+   Base Design System Variables (Custom Theme Override)
+   ============================================================================ */
+
+:root {
+  /* Core Colors - Purple/Violet Theme */
+  --background: oklch(0.9940 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(0.9940 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(0.9911 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.5393 0.2713 286.7462);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9540 0.0063 255.4755);
+  --secondary-foreground: oklch(0.1344 0 0);
+  --muted: oklch(0.9702 0 0);
+  --muted-foreground: oklch(0.4386 0 0);
+  --accent: oklch(0.9393 0.0288 266.3680);
+  --accent-foreground: oklch(0.5445 0.1903 259.4848);
+  --destructive: oklch(0.6290 0.1902 23.0704);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.9300 0.0094 286.2156);
+  --input: oklch(0.9401 0 0);
+  --ring: oklch(0 0 0);
+
+  /* Chart Colors */
+  --chart-1: oklch(0.7459 0.1483 156.4499);
+  --chart-2: oklch(0.5393 0.2713 286.7462);
+  --chart-3: oklch(0.7336 0.1758 50.5517);
+  --chart-4: oklch(0.5828 0.1809 259.7276);
+  --chart-5: oklch(0.5590 0 0);
+
+  /* Sidebar */
+  --sidebar: oklch(0.9777 0.0051 247.8763);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.9401 0 0);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0.9401 0 0);
+  --sidebar-ring: oklch(0 0 0);
+
+  /* Typography */
+  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
+  --font-serif: 'Lora', Georgia, serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+
+  /* Radius & Spacing */
+  --radius: 1.4rem;
+  --spacing: 0.27rem;
+  --tracking-normal: -0.025em;
+
+  /* Shadows */
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+
+  /* CRM-Specific: Pipeline stage colors */
+  --stage-qualification: oklch(0.55 0.22 286);
+  --stage-needs-analysis: oklch(0.55 0.18 150);
+  --stage-proposal: oklch(0.65 0.18 80);
+  --stage-negotiation: oklch(0.55 0.2 320);
+  --stage-won: oklch(0.55 0.18 150);
+  --stage-lost: oklch(0.55 0.22 25);
+
+  /* CRM-Specific: Lead score colors */
+  --score-hot: oklch(0.55 0.22 25);
+  --score-warm: oklch(0.65 0.18 80);
+  --score-cold: oklch(0.55 0.22 286);
+
+  /* CRM-Specific: Status colors */
+  --status-new: oklch(0.55 0.22 286);
+  --status-active: oklch(0.55 0.18 150);
+  --status-pending: oklch(0.65 0.18 80);
+  --status-completed: oklch(0.55 0.18 150);
+  --status-cancelled: oklch(0.5 0.02 260);
+
+  /* CRM-Specific: Priority colors */
+  --priority-urgent: oklch(0.55 0.22 25);
+  --priority-high: oklch(0.65 0.18 80);
+  --priority-medium: oklch(0.55 0.22 286);
+  --priority-low: oklch(0.5 0.02 260);
+
+  /* Card shadows */
+  --card-shadow-idle: var(--shadow-sm);
+  --card-shadow-hover: var(--shadow-lg);
+
+  /* Animation */
+  --transition-fast: 100ms ease;
+  --transition-normal: 200ms ease;
+}
+
+/* Dark mode */
+.dark {
+  --background: oklch(0.2223 0.0060 271.1393);
+  --foreground: oklch(0.9551 0 0);
+  --card: oklch(0.2568 0.0076 274.6528);
+  --card-foreground: oklch(0.9551 0 0);
+  --popover: oklch(0.2568 0.0076 274.6528);
+  --popover-foreground: oklch(0.9551 0 0);
+  --primary: oklch(0.6132 0.2294 291.7437);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.2940 0.0130 272.9312);
+  --secondary-foreground: oklch(0.9551 0 0);
+  --muted: oklch(0.2940 0.0130 272.9312);
+  --muted-foreground: oklch(0.7058 0 0);
+  --accent: oklch(0.2795 0.0368 260.0310);
+  --accent-foreground: oklch(0.7857 0.1153 246.6596);
+  --destructive: oklch(0.7106 0.1661 22.2162);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.3289 0.0092 268.3843);
+  --input: oklch(0.3289 0.0092 268.3843);
+  --ring: oklch(0.6132 0.2294 291.7437);
+
+  --chart-1: oklch(0.8003 0.1821 151.7110);
+  --chart-2: oklch(0.6132 0.2294 291.7437);
+  --chart-3: oklch(0.8077 0.1035 19.5706);
+  --chart-4: oklch(0.6691 0.1569 260.1063);
+  --chart-5: oklch(0.7058 0 0);
+
+  --sidebar: oklch(0.2011 0.0039 286.0396);
+  --sidebar-foreground: oklch(0.9551 0 0);
+  --sidebar-primary: oklch(0.6132 0.2294 291.7437);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.2940 0.0130 272.9312);
+  --sidebar-accent-foreground: oklch(0.6132 0.2294 291.7437);
+  --sidebar-border: oklch(0.3289 0.0092 268.3843);
+  --sidebar-ring: oklch(0.6132 0.2294 291.7437);
+
+  /* CRM-Specific: Dark mode adjustments */
+  --stage-qualification: oklch(0.50 0.20 286);
+  --stage-needs-analysis: oklch(0.45 0.16 150);
+  --stage-proposal: oklch(0.55 0.16 80);
+  --stage-negotiation: oklch(0.50 0.18 320);
+  --stage-won: oklch(0.45 0.16 150);
+  --stage-lost: oklch(0.45 0.2 25);
+}
+
+/* Theme inline mapping for Tailwind */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+/* ============================================================================
+   Base Styles
+   ============================================================================ */
+
+body {
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+/* ============================================================================
+   Typography
+   ============================================================================ */
+
+.crm-heading {
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.3;
+}
+
+.crm-stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.crm-stat-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+}
+
+/* ============================================================================
+   Pipeline Kanban
+   ============================================================================ */
+
+.pipeline-container {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  padding: 1rem;
+  min-height: calc(100vh - 200px);
+}
+
+.pipeline-column {
+  width: 300px;
+  flex-shrink: 0;
+  background: oklch(from var(--muted) l c h / 0.3);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+}
+
+.pipeline-header {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2px solid;
+}
+
+.pipeline-header.stage-qualification { border-color: var(--stage-qualification); }
+.pipeline-header.stage-needs-analysis { border-color: var(--stage-needs-analysis); }
+.pipeline-header.stage-proposal { border-color: var(--stage-proposal); }
+.pipeline-header.stage-negotiation { border-color: var(--stage-negotiation); }
+.pipeline-header.stage-won { border-color: var(--stage-won); }
+.pipeline-header.stage-lost { border-color: var(--stage-lost); }
+
+.pipeline-stats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.pipeline-cards {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* ============================================================================
+   Deal Card
+   ============================================================================ */
+
+.deal-card {
+  background: var(--card);
+  border-radius: var(--radius-sm);
+  padding: 0.875rem;
+  box-shadow: var(--card-shadow-idle);
+  cursor: pointer;
+  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+.deal-card:hover {
+  box-shadow: var(--card-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.deal-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 0.25rem;
+}
+
+.deal-company {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin-bottom: 0.5rem;
+}
+
+.deal-amount {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.deal-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+/* ============================================================================
+   Lead Score Badge
+   ============================================================================ */
+
+.lead-score {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: white;
+}
+
+.lead-score.hot { background: var(--score-hot); }
+.lead-score.warm { background: var(--score-warm); }
+.lead-score.cold { background: var(--score-cold); }
+
+/* ============================================================================
+   Status Badges
+   ============================================================================ */
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.675rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.status-badge.new { background: var(--status-new); color: white; }
+.status-badge.contacted { background: var(--status-active); color: white; }
+.status-badge.qualified { background: var(--status-pending); color: white; }
+.status-badge.converted { background: var(--status-completed); color: white; }
+.status-badge.lost { background: var(--status-cancelled); color: white; }
+
+/* ============================================================================
+   Priority Indicators
+   ============================================================================ */
+
+.priority-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.priority-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+
+.priority-dot.urgent { background: var(--priority-urgent); }
+.priority-dot.high { background: var(--priority-high); }
+.priority-dot.medium { background: var(--priority-medium); }
+.priority-dot.low { background: var(--priority-low); }
+
+/* ============================================================================
+   Stats Cards
+   ============================================================================ */
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.stat-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-card-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+  background: oklch(from var(--primary) l c h / 0.1);
+  color: var(--primary);
+}
+
+.stat-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.stat-trend.positive { color: var(--stage-won); }
+.stat-trend.negative { color: var(--stage-lost); }
+
+/* ============================================================================
+   Activity Timeline
+   ============================================================================ */
+
+.activity-timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.activity-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid oklch(from var(--border) l c h / 0.5);
+}
+
+.activity-item:last-child {
+  border-bottom: none;
+}
+
+.activity-icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.activity-icon.call { background: var(--stage-qualification); color: white; }
+.activity-icon.email { background: var(--stage-needs-analysis); color: white; }
+.activity-icon.meeting { background: var(--stage-proposal); color: white; }
+.activity-icon.task { background: var(--stage-negotiation); color: white; }
+
+.activity-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.activity-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.activity-description {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin-top: 0.125rem;
+}
+
+.activity-time {
+  font-size: 0.675rem;
+  color: var(--muted-foreground);
+  margin-top: 0.25rem;
+}
+
+/* ============================================================================
+   Data Tables
+   ============================================================================ */
+
+.crm-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.crm-table th {
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.crm-table td {
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid oklch(from var(--border) l c h / 0.5);
+  font-size: 0.875rem;
+}
+
+.crm-table tr:hover {
+  background: oklch(from var(--muted) l c h / 0.3);
+}
+
+/* ============================================================================
+   Charts
+   ============================================================================ */
+
+.chart-container {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+.chart-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+/* ============================================================================
+   Responsive Adjustments
+   ============================================================================ */
+
+@media (max-width: 768px) {
+  .pipeline-column {
+    width: 280px;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+

package/styles/variables.css

@@ -0,0 +1,111 @@
+/**
+ * CRM Theme Variables
+ * Color palette and design tokens for SalesForce Pro CRM
+ */
+
+:root {
+  /* Brand Colors */
+  --crm-primary: #0B5FFF;
+  --crm-primary-hover: #0A54E6;
+  --crm-primary-light: #E6F0FF;
+  --crm-secondary: #6B46C1;
+  --crm-secondary-hover: #5A3BA8;
+  --crm-accent: #10B981;
+  --crm-accent-hover: #0E9F6E;
+  --crm-warning: #F59E0B;
+  --crm-warning-hover: #D97706;
+  --crm-danger: #EF4444;
+  --crm-danger-hover: #DC2626;
+
+  /* Pipeline Stage Colors */
+  --stage-qualification: #3B82F6;
+  --stage-analysis: #10B981;
+  --stage-proposal: #F59E0B;
+  --stage-negotiation: #8B5CF6;
+  --stage-won: #059669;
+  --stage-lost: #DC2626;
+
+  /* Activity Type Colors */
+  --activity-call: #3B82F6;
+  --activity-email: #8B5CF6;
+  --activity-meeting: #10B981;
+  --activity-task: #F59E0B;
+  --activity-note: #6B7280;
+
+  /* Semantic Colors */
+  --crm-bg-primary: #FFFFFF;
+  --crm-bg-secondary: #F9FAFB;
+  --crm-bg-tertiary: #F3F4F6;
+  --crm-border: #E5E7EB;
+  --crm-border-light: #F3F4F6;
+  
+  /* Text Colors */
+  --crm-text-primary: #111827;
+  --crm-text-secondary: #6B7280;
+  --crm-text-tertiary: #9CA3AF;
+  --crm-text-inverse: #FFFFFF;
+
+  /* Spacing */
+  --crm-space-xs: 0.25rem;   /* 4px */
+  --crm-space-sm: 0.5rem;    /* 8px */
+  --crm-space-md: 1rem;      /* 16px */
+  --crm-space-lg: 1.5rem;    /* 24px */
+  --crm-space-xl: 2rem;      /* 32px */
+  --crm-space-2xl: 3rem;     /* 48px */
+
+  /* Border Radius */
+  --crm-radius-sm: 0.375rem;  /* 6px */
+  --crm-radius-md: 0.5rem;    /* 8px */
+  --crm-radius-lg: 0.75rem;   /* 12px */
+  --crm-radius-xl: 1rem;      /* 16px */
+
+  /* Shadows */
+  --crm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --crm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --crm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --crm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Typography */
+  --crm-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  --crm-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  
+  /* Font Sizes */
+  --crm-text-xs: 0.75rem;     /* 12px */
+  --crm-text-sm: 0.875rem;    /* 14px */
+  --crm-text-base: 1rem;      /* 16px */
+  --crm-text-lg: 1.125rem;    /* 18px */
+  --crm-text-xl: 1.25rem;     /* 20px */
+  --crm-text-2xl: 1.5rem;     /* 24px */
+  --crm-text-3xl: 1.875rem;   /* 30px */
+
+  /* Font Weights */
+  --crm-font-normal: 400;
+  --crm-font-medium: 500;
+  --crm-font-semibold: 600;
+  --crm-font-bold: 700;
+
+  /* Transitions */
+  --crm-transition-fast: 150ms ease-in-out;
+  --crm-transition-base: 200ms ease-in-out;
+  --crm-transition-slow: 300ms ease-in-out;
+
+  /* Z-index layers */
+  --crm-z-dropdown: 1000;
+  --crm-z-modal: 1050;
+  --crm-z-tooltip: 1100;
+  --crm-z-notification: 1150;
+}
+
+/* Dark mode support (optional for future) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --crm-bg-primary: #111827;
+    --crm-bg-secondary: #1F2937;
+    --crm-bg-tertiary: #374151;
+    --crm-border: #4B5563;
+    --crm-border-light: #374151;
+    --crm-text-primary: #F9FAFB;
+    --crm-text-secondary: #D1D5DB;
+    --crm-text-tertiary: #9CA3AF;
+  }
+}