/* ============================================================
   CRM TECH PLATFORM — Design Tokens
   Modern CRM Development Services
   ============================================================ */

:root {
  /* ── Color Palette ─────────────────────────────────────── */
  --primary-dark:       #090d1a;
  --secondary-dark:     #0f172a;
  --tertiary-dark:      #172038;
  --surface-dark:       #1e294b;
  --surface-elevated:   #26335c;

  /* ── Violet & Tech Accents ─────────────────────────────── */
  --accent-violet:        #7c3aed;
  --accent-violet-light:  #a78bfa;
  --accent-violet-dark:   #5b21b6;
  --accent-violet-glow:   rgba(124, 58, 237, 0.35);
  --accent-purple-bright: #c084fc;

  /* ── Multi-Color CRM & Data Accents ────────────────────── */
  --accent-cyan:          #06b6d4;
  --accent-cyan-light:    #38bdf8;
  --accent-emerald:       #10b981;
  --accent-emerald-light: #34d399;
  --accent-indigo:        #6366f1;
  --accent-indigo-light:  #818cf8;
  --accent-pink:          #ec4899;
  --accent-amber:         #f59e0b;

  /* ── Compatibility Aliases ─────────────────────────────── */
  --accent-gold:          var(--accent-violet-light);
  --accent-gold-light:    var(--accent-purple-bright);
  --accent-gold-dark:     var(--accent-violet);
  --accent-gold-glow:     var(--accent-violet-glow);

  /* ── Text Neutrals ─────────────────────────────────────── */
  --text-white:         #ffffff;
  --text-light:         #e2e8f0;
  --text-muted:         #94a3b8;
  --text-dim:           #64748b;

  /* ── Feedback States ───────────────────────────────────── */
  --success:            #10b981;
  --error:              #ef4444;
  --info:               #38bdf8;

  /* ── Gradients ─────────────────────────────────────────── */
  --gradient-violet:       linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #4f46e5 100%);
  --gradient-violet-hover: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6366f1 100%);
  --gradient-violet-cyan:  linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --gradient-violet-subtle:linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(99, 102, 241, 0.05) 100%);
  --gradient-gold:         linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #c084fc 100%);
  --gradient-gold-hover:   linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #a855f7 100%);
  --gradient-dark:         linear-gradient(180deg, #090d1a 0%, #0f172a 100%);
  --gradient-dark-rev:     linear-gradient(180deg, #0f172a 0%, #090d1a 100%);
  --gradient-radial:       radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.16) 0%, transparent 70%);
  --gradient-hero:         radial-gradient(ellipse at 25% 20%, rgba(124, 58, 237, 0.2) 0%, transparent 55%),
                           radial-gradient(ellipse at 75% 75%, rgba(6, 182, 212, 0.12) 0%, transparent 55%),
                           radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
  --gradient-card:         linear-gradient(145deg, rgba(23, 32, 56, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);

  /* ── Glass Effect ──────────────────────────────────────── */
  --glass-bg:           rgba(15, 23, 42, 0.65);
  --glass-bg-solid:     rgba(15, 23, 42, 0.88);
  --glass-border:       rgba(139, 92, 246, 0.18);
  --glass-border-hover: rgba(139, 92, 246, 0.45);
  --glass-blur:         14px;

  /* ── Borders ───────────────────────────────────────────── */
  --border-subtle:      rgba(139, 92, 246, 0.12);
  --border-light:       rgba(139, 92, 246, 0.2);
  --border-medium:      rgba(139, 92, 246, 0.35);
  --border-white:       rgba(255, 255, 255, 0.08);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:       'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:            clamp(1.85rem, 5vw + 0.5rem, 4.5rem);
  --fs-h1:              clamp(1.6rem, 4vw + 0.25rem, 3.5rem);
  --fs-h2:              clamp(1.35rem, 3vw + 0.25rem, 2.75rem);
  --fs-h3:              clamp(1.15rem, 1.5vw + 0.25rem, 1.75rem);
  --fs-h4:              clamp(1.05rem, 1vw + 0.25rem, 1.375rem);
  --fs-body:            1.0625rem;
  --fs-body-lg:         1.1875rem;
  --fs-small:           0.875rem;
  --fs-xs:              0.75rem;
  --fs-btn:             1rem;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --lh-tight:           1.2;
  --lh-snug:            1.4;
  --lh-normal:          1.7;
  --lh-relaxed:         1.9;

  --ls-tight:           -0.025em;
  --ls-normal:          0;
  --ls-wide:            0.05em;
  --ls-wider:           0.1em;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-xs:           0.5rem;
  --space-sm:           0.75rem;
  --space-md:           1rem;
  --space-lg:           1.5rem;
  --space-xl:           2rem;
  --space-2xl:          3rem;
  --space-3xl:          4rem;
  --space-4xl:          6rem;
  --space-5xl:          8rem;

  --section-py:         clamp(4rem, 8vw, 8rem);
  --section-py-sm:      clamp(3rem, 5vw, 5rem);

  /* ── Container ─────────────────────────────────────────── */
  --container-max:      1280px;
  --container-wide:     1440px;
  --container-narrow:   900px;
  --container-px:       clamp(1rem, 3vw, 2rem);

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:          0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-gold:        0 4px 24px rgba(124, 58, 237, 0.3);
  --shadow-gold-lg:     0 8px 40px rgba(124, 58, 237, 0.4);
  --shadow-violet:      0 4px 24px rgba(124, 58, 237, 0.3);
  --shadow-violet-lg:   0 8px 40px rgba(124, 58, 237, 0.45);
  --shadow-glow:        0 0 35px rgba(124, 58, 237, 0.25);
  --shadow-cyan-glow:   0 0 35px rgba(6, 182, 212, 0.2);
  --shadow-inner:       inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;

  --transition-base:    all var(--duration-normal) var(--ease-out);
  --transition-fast:    all var(--duration-fast) var(--ease-out);
  --transition-slow:    all var(--duration-slow) var(--ease-out);

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --z-behind:           -1;
  --z-base:             1;
  --z-card:             10;
  --z-sticky:           100;
  --z-header:           1000;
  --z-overlay:          2000;
  --z-modal:            3000;
  --z-toast:            4000;
}