/* =========================================================
   Promixa AI — Shared Design Tokens
   Single source of truth for the premium SaaS design system.
   Referenced by admin.css, frontend.css, and installer.css,
   which alias their own legacy variable names onto these.
   ========================================================= */
:root{
  /* Brand — cool slate (primary structural color) */
  --brand-50:  #f8fafc;
  --brand-100: #f1f5f9;
  --brand-200: #e2e8f0;
  --brand-400: #64748b;
  --brand-500: #475569;
  --brand-600: #334155;
  --brand-700: #1e293b;
  --brand-900: #0f172a;

  /* Accent — cyan (signature highlight color) */
  --accent-300: #67e8f9;
  --accent-500: #06b6d4;
  --accent-600: #0891b2;

  /* Signature gradient — used on primary buttons, icons, hero glow */
  --gradient-premium: linear-gradient(135deg, var(--brand-600) 0%, var(--accent-500) 100%);

  /* Neutrals */
  --ink-900: #161221;
  --ink-700: #4a4458;
  --ink-500: #756f87;
  --ink-300: #b9b4c6;
  --surface-0: #ffffff;
  --surface-1: #faf9fc;
  --surface-2: #f2effa;
  --line: #e8e3f3;

  /* Feedback */
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Radius & elevation */
  --r-card: 20px;
  --r-btn: 12px;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px -8px rgba(15,23,42,0.10);
  --shadow-card-hover: 0 4px 8px rgba(15,23,42,0.06), 0 20px 40px -12px rgba(6,182,212,0.18), 0 20px 40px -12px rgba(15,23,42,0.10);
}