/* ═══════════════════════════════════════════════════════
   PulsifyAI Master CRM — Base Design Tokens & Resets
   "Calm Tech" Neumorphism Design System
   ═══════════════════════════════════════════════════════ */

/* ── Google Font ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ────────────────────────────────────── */
:root {
  /* Background */
  --bg-base: #E0E5EC;
  --bg-card: #E0E5EC;
  --bg-sidebar: #E0E5EC;

  /* Text */
  --text-primary: #2D3748;
  --text-secondary: #718096;
  --text-tertiary: #A0AEC0;
  --text-accent: #4D8BCA;

  /* Accent */
  --accent: #4D8BCA;
  --accent-hover: #3A7AB8;
  --accent-light: rgba(77, 139, 202, 0.12);
  --accent-glow: rgba(77, 139, 202, 0.25);

  /* Neumorphic Shadows */
  --shadow-light: rgba(255, 255, 255, 0.8);
  --shadow-dark: rgba(163, 177, 198, 0.6);
  --shadow-raised: 6px 6px 14px var(--shadow-dark),
                  -6px -6px 14px var(--shadow-light);
  --shadow-raised-sm: 3px 3px 8px var(--shadow-dark),
                     -3px -3px 8px var(--shadow-light);
  --shadow-pressed: inset 3px 3px 8px var(--shadow-dark),
                    inset -3px -3px 8px var(--shadow-light);
  --shadow-flat: 2px 2px 6px var(--shadow-dark),
               -2px -2px 6px var(--shadow-light);

  /* Status */
  --success: #48BB78;
  --success-bg: rgba(72, 187, 120, 0.12);
  --danger: #F56565;
  --danger-bg: rgba(245, 101, 101, 0.12);
  --warning: #ED8936;
  --warning-bg: rgba(237, 137, 54, 0.12);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-round: 50%;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed: 80px;
}

/* ── CSS Reset ────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  outline: none;
  border: none;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol { list-style: none; }

/* ── Neumorphic Utility Classes ───────────────────────── */
.nm-raised {
  background: var(--bg-base);
  box-shadow: var(--shadow-raised);
  border-radius: var(--radius-lg);
}

.nm-raised-sm {
  background: var(--bg-base);
  box-shadow: var(--shadow-raised-sm);
  border-radius: var(--radius-md);
}

.nm-pressed {
  background: var(--bg-base);
  box-shadow: var(--shadow-pressed);
  border-radius: var(--radius-md);
}

.nm-flat {
  background: var(--bg-base);
  box-shadow: var(--shadow-flat);
  border-radius: var(--radius-md);
}

/* ── Typography ───────────────────────────────────────── */
.text-xs     { font-size: 0.7rem;  }
.text-sm     { font-size: 0.8rem;  }
.text-base   { font-size: 0.95rem; }
.text-lg     { font-size: 1.15rem; }
.text-xl     { font-size: 1.35rem; }
.text-2xl    { font-size: 1.6rem;  }
.text-3xl    { font-size: 2rem;    }
.text-4xl    { font-size: 2.5rem;  }

.font-light    { font-weight: 300; }
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

.text-muted   { color: var(--text-secondary); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }

.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Skeleton Loading ─────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-base) 25%,
    rgba(255,255,255,0.4) 50%,
    var(--bg-base) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}

.skeleton-heading {
  height: 28px;
  margin-bottom: 12px;
  width: 50%;
}

.skeleton-card {
  height: 120px;
  width: 100%;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--shadow-dark);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}