:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --bg-primary:    #FAFAFA;
  --bg-card:       #FFFFFF;
  --bg-elevated:   rgba(255, 255, 255, 0.72);
  --bg-overlay:    rgba(0, 0, 0, 0.45);

  --text-primary:   #0A0A0A;
  --text-secondary: #6B6B6B;
  --text-tertiary:  #A0A0A0;
  --text-inverse:   #FFFFFF;

  --border-subtle:  #ECECEC;
  --border-strong:  #D1D1D1;

  --accent:         #2563EB;   /* Soft10 brand blue */
  --accent-hover:   #1D4ED8;
  --accent-soft:    rgba(37, 99, 235, 0.10);
  --accent-press:   rgba(37, 99, 235, 0.18);

  --success:        #34C759;
  --success-soft:   rgba(52, 199, 89, 0.12);
  --warning:        #FF9500;
  --danger:         #FF3B30;
  --danger-soft:    rgba(255, 59, 48, 0.10);

  /* Channel brand colours */
  --ch-whatsapp:    #25D366;
  --ch-instagram:   #E1306C;
  --ch-facebook:    #1877F2;
  --ch-telegram:    #0088CC;
  --ch-livechat:    #2563EB;

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-22: 22px;
  --fs-28: 28px;

  /* ── Spacing (4px grid) ────────────────────────────────── */
  --s-2:  2px;
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;
  --r-16:   16px;
  --r-20:   20px;
  --r-full: 9999px;

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 320ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --nav-h:    64px;
  --header-h: 56px;
  --tap-min:  44px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}