/* ==========================================================================
   MiCRM Design Tokens
   Version: 1.0
   
   CSS Custom Properties that define the visual language of the application.
   These tokens are the single source of truth for colors, spacing, typography,
   shadows, and border radii. Override them in a [data-theme="dark"] selector
   for dark mode support.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     SPACING — 4px base grid
     Usage: padding: var(--space-4); margin-bottom: var(--space-6);
     ------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* -------------------------------------------------------------------------
     COLORS — Light theme (default)
     HSL format for easy manipulation
     ------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg-page: hsl(220, 14%, 96%);          /* #f1f5f9 — Slate 100 */
  --color-bg-primary: hsl(0, 0%, 100%);          /* #ffffff */
  --color-bg-secondary: hsl(220, 14%, 96%);      /* #f1f5f9 */
  --color-bg-elevated: hsl(0, 0%, 100%);         /* Cards, modals */
  --color-bg-hover: hsl(220, 14%, 94%);          /* #e8ecf1 */
  --color-bg-active: hsl(217, 91%, 96%);         /* #eff6ff — Blue tint */

  /* Text */
  --color-text-primary: hsl(222, 47%, 11%);      /* #0f172a — Slate 900 */
  --color-text-secondary: hsl(215, 16%, 47%);    /* #64748b — Slate 500 */
  --color-text-muted: hsl(215, 20%, 65%);        /* #94a3b8 — Slate 400 */
  --color-text-inverse: hsl(0, 0%, 100%);        /* White text on dark bg */

  /* Brand */
  --color-brand-50: hsl(217, 91%, 96%);          /* #eff6ff */
  --color-brand-100: hsl(217, 91%, 91%);         /* #dbeafe */
  --color-brand-500: hsl(217, 91%, 55%);         /* #3b82f6 */
  --color-brand-600: hsl(217, 91%, 45%);         /* #2563eb */
  --color-brand-700: hsl(217, 91%, 40%);         /* #1d4ed8 */
  --color-brand-800: hsl(217, 91%, 33%);         /* #1e40af */

  /* Semantic — Status */
  --color-success-50: hsl(142, 76%, 95%);        /* #f0fdf4 */
  --color-success-100: hsl(141, 84%, 88%);       /* #dcfce7 */
  --color-success-600: hsl(142, 71%, 35%);       /* #16a34a */
  --color-success-700: hsl(142, 71%, 29%);       /* #15803d */

  --color-warning-50: hsl(48, 96%, 95%);         /* #fefce8 */
  --color-warning-100: hsl(48, 96%, 88%);        /* #fef9c3 */
  --color-warning-600: hsl(38, 92%, 40%);        /* #ca8a04 */
  --color-warning-700: hsl(38, 92%, 33%);        /* #a16207 */

  --color-danger-50: hsl(0, 86%, 97%);           /* #fef2f2 */
  --color-danger-100: hsl(0, 93%, 94%);          /* #fee2e2 */
  --color-danger-600: hsl(0, 72%, 51%);          /* #dc2626 */
  --color-danger-700: hsl(0, 72%, 43%);          /* #b91c1c */

  --color-info-50: hsl(204, 94%, 96%);           /* #f0f9ff */
  --color-info-100: hsl(204, 94%, 88%);          /* #e0f2fe */
  --color-info-600: hsl(199, 89%, 40%);          /* #0284c7 */

  /* Funnel Stage Colors */
  --color-stage-pink: hsl(340, 82%, 46%);        /* #d6336c */
  --color-stage-pink-light: hsl(340, 82%, 94%);
  --color-stage-yellow: hsl(38, 92%, 45%);       /* #b45309 */
  --color-stage-yellow-light: hsl(48, 96%, 92%);
  --color-stage-green: hsl(142, 71%, 35%);       /* #16a34a */
  --color-stage-green-light: hsl(142, 76%, 93%);
  --color-stage-blue: hsl(217, 91%, 50%);        /* #2563eb */
  --color-stage-blue-light: hsl(217, 91%, 94%);

  /* Borders */
  --color-border: hsl(220, 13%, 91%);            /* #e2e8f0 — Slate 200 */
  --color-border-hover: hsl(215, 16%, 75%);      /* #a0aec0 */
  --color-border-focus: var(--color-brand-500);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.8125rem;    /* 13px */
  --font-size-base: 0.875rem;   /* 14px — CRM default body */
  --font-size-md: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */

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

  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* -------------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Focus ring */
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring-color: var(--color-brand-500);

  /* -------------------------------------------------------------------------
     BORDERS & RADII
     ------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Pill shape */

  --border-width: 1px;

  /* -------------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded: 240px;
  --topbar-height: 56px;
  --content-max-width: 1400px;
}

/* ===========================================================================
   DARK MODE
   Applied via prefers-color-scheme OR manual [data-theme="dark"] attribute
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-page: hsl(222, 47%, 8%);
    --color-bg-primary: hsl(222, 47%, 11%);
    --color-bg-secondary: hsl(217, 33%, 15%);
    --color-bg-elevated: hsl(215, 28%, 17%);
    --color-bg-hover: hsl(217, 33%, 20%);
    --color-bg-active: hsl(217, 50%, 18%);

    --color-text-primary: hsl(210, 40%, 96%);
    --color-text-secondary: hsl(215, 20%, 65%);
    --color-text-muted: hsl(215, 16%, 47%);

    --color-border: hsl(217, 33%, 22%);
    --color-border-hover: hsl(215, 20%, 40%);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  }
}

[data-theme="dark"] {
  --color-bg-page: hsl(222, 47%, 8%);
  --color-bg-primary: hsl(222, 47%, 11%);
  --color-bg-secondary: hsl(217, 33%, 15%);
  --color-bg-elevated: hsl(215, 28%, 17%);
  --color-bg-hover: hsl(217, 33%, 20%);
  --color-bg-active: hsl(217, 50%, 18%);

  --color-text-primary: hsl(210, 40%, 96%);
  --color-text-secondary: hsl(215, 20%, 65%);
  --color-text-muted: hsl(215, 16%, 47%);

  --color-border: hsl(217, 33%, 22%);
  --color-border-hover: hsl(215, 20%, 40%);

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
}