/* ==========================================================================
   Pulse Analytics - Design Tokens & CSS Custom Properties
   ==========================================================================
   A comprehensive token system for a light-theme SaaS analytics dashboard.
   Primary palette: Indigo (#4F46E5) / Violet (#7C3AED)
   Font: Inter (Google Fonts)
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Color Palette - Core Brand
     -------------------------------------------------------------------------- */

  /* Indigo (Primary) */
  --color-indigo-25:  #f5f3ff;
  --color-indigo-50:  #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;

  /* Violet (Accent) */
  --color-violet-50:  #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;

  /* --------------------------------------------------------------------------
     Color Palette - Neutrals (Gray)
     -------------------------------------------------------------------------- */
  --color-gray-25:  #fcfcfd;
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  --color-white: #ffffff;
  --color-black: #000000;

  /* --------------------------------------------------------------------------
     Color Palette - Semantic / Feedback
     -------------------------------------------------------------------------- */

  /* Green (Success / Positive trend) */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;

  /* Red (Danger / Negative trend) */
  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;

  /* Yellow / Amber (Warning / Pending) */
  --color-yellow-50:  #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;

  /* Blue (Info) */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* Cyan (Supplementary chart color) */
  --color-cyan-50:  #ecfeff;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;

  /* Orange (Supplementary chart color) */
  --color-orange-50:  #fff7ed;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;

  /* --------------------------------------------------------------------------
     Semantic Token Aliases
     -------------------------------------------------------------------------- */

  /* Backgrounds */
  --bg-app:        var(--color-gray-50);
  --bg-surface:    var(--color-white);
  --bg-surface-secondary: var(--color-gray-50);
  --bg-sidebar:    var(--color-indigo-950);
  --bg-topbar:     var(--color-white);
  --bg-hover:      var(--color-gray-50);
  --bg-active:     var(--color-indigo-50);
  --bg-muted:      var(--color-gray-100);
  --bg-overlay:    rgba(15, 23, 42, 0.5);

  /* Text */
  --text-primary:     var(--color-gray-900);
  --text-secondary:   var(--color-gray-600);
  --text-tertiary:    var(--color-gray-500);
  --text-placeholder:  var(--color-gray-400);
  --text-disabled:    var(--color-gray-300);
  --text-inverse:     var(--color-white);
  --text-link:        var(--color-indigo-600);
  --text-link-hover:  var(--color-indigo-700);

  /* Sidebar text */
  --sidebar-text:        rgba(255, 255, 255, 0.7);
  --sidebar-text-active: var(--color-white);
  --sidebar-text-muted:  rgba(255, 255, 255, 0.4);
  --sidebar-hover-bg:    rgba(255, 255, 255, 0.08);
  --sidebar-active-bg:   rgba(79, 70, 229, 0.4);

  /* Borders */
  --border-default:   var(--color-gray-200);
  --border-light:     var(--color-gray-100);
  --border-strong:    var(--color-gray-300);
  --border-focus:     var(--color-indigo-500);
  --border-error:     var(--color-red-500);

  /* Brand / Interactive */
  --color-primary:       var(--color-indigo-600);
  --color-primary-hover: var(--color-indigo-700);
  --color-primary-light: var(--color-indigo-50);
  --color-accent:        var(--color-violet-600);
  --color-accent-hover:  var(--color-violet-700);
  --color-accent-light:  var(--color-violet-50);

  /* Status / Badge colors */
  --status-active-bg:    var(--color-green-100);
  --status-active-text:  var(--color-green-700);
  --status-inactive-bg:  var(--color-gray-100);
  --status-inactive-text: var(--color-gray-600);
  --status-pending-bg:   var(--color-yellow-100);
  --status-pending-text: var(--color-yellow-700);
  --status-error-bg:     var(--color-red-100);
  --status-error-text:   var(--color-red-700);
  --status-info-bg:      var(--color-blue-100);
  --status-info-text:    var(--color-blue-700);

  /* Trends */
  --trend-up:    var(--color-green-600);
  --trend-up-bg: var(--color-green-50);
  --trend-down:    var(--color-red-600);
  --trend-down-bg: var(--color-red-50);

  /* Chart palette */
  --chart-1: var(--color-indigo-500);
  --chart-2: var(--color-violet-500);
  --chart-3: var(--color-cyan-500);
  --chart-4: var(--color-orange-500);
  --chart-5: var(--color-green-500);
  --chart-6: var(--color-red-500);

  /* --------------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code',
                Consolas, 'Liberation Mono', Menlo, monospace;

  /* Font sizes */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px - dashboard base */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* Font weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;

  /* --------------------------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px  */
  --space-1:   0.25rem;   /* 4px  */
  --space-1-5: 0.375rem;  /* 6px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* --------------------------------------------------------------------------
     Layout Dimensions
     -------------------------------------------------------------------------- */
  --sidebar-width:       260px;
  --sidebar-collapsed-width: 72px;
  --topbar-height:       64px;
  --content-max-width:   1400px;
  --content-padding:     var(--space-6);

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --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;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.06),
                 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.07),
                 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --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);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Focus ring */
  --shadow-focus: 0 0 0 2px var(--color-white),
                  0 0 0 4px var(--color-indigo-500);
  --shadow-focus-error: 0 0 0 2px var(--color-white),
                        0 0 0 4px var(--color-red-500);

  /* Card-specific shadows */
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-dropdown:   0 4px 16px rgba(0, 0, 0, 0.12),
                       0 1px 3px rgba(0, 0, 0, 0.08);

  /* --------------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------------- */
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-75:    75ms;
  --duration-100:   100ms;
  --duration-150:   150ms;
  --duration-200:   200ms;
  --duration-300:   300ms;
  --duration-500:   500ms;

  --transition-fast:    all 150ms var(--ease-default);
  --transition-base:    all 200ms var(--ease-default);
  --transition-slow:    all 300ms var(--ease-default);
  --transition-colors:  color 150ms var(--ease-default),
                        background-color 150ms var(--ease-default),
                        border-color 150ms var(--ease-default);
  --transition-shadow:  box-shadow 200ms var(--ease-default);
  --transition-transform: transform 200ms var(--ease-default);

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */
  --z-base:       0;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-sidebar:    30;
  --z-topbar:     40;
  --z-overlay:    50;
  --z-modal:      60;
  --z-popover:    70;
  --z-tooltip:    80;
  --z-toast:      90;
  --z-max:        100;
}